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本 书 将 向 你 介绍 “可 缩放 矢量 图 形 ”(Scalable Vector Graphics) 技术 ， 即 SVG。SVG 是 万 
维 网 联盟 (W3C) 的 一 项 推荐 标准 ， 它 使 用 XML 来 描述 由 直线 、 曲 线 、 文 本 等 组 成 的 图 
形 。 这 段 干巴 巴 的 定义 并 不 能 体现 出 SVG 的 作用 和 它 的 强大 之 处 。 

你 可 以 将 SVG 图 形 加 到 XSL-FO (Extensible Stylesheet Language Formatting Objects) “ 文 
档 中 ， 然 后 将 文档 转换 为 Adobe PDF 格式 来 获得 更 高 的 印刷 质量 。 地 图 和 气象 领域 的 工作 
者 可 以 使 用 SVG 来 创建 高 精度 、 高 质量 、 可 移植 的 图 形 。Web 开发 者 将 SVG 幅 入 网 页 来 
创建 高 分 辩 率 的 响应 式 图 形 ， 且 可 以 使 文件 尺寸 很 小 。 本 书 中 的 所 有 图 表 最 初 都 是 由 SVG 
创建 的 。 在 学 习 和 使 用 SVG 时 ， 你 一 定 能 想到 这 项 新 技术 的 一 些 新 的 、 有 趣 的 使 用 场景 。 


本 书 读者 


如 果 你 想 做 以 下 事情 ， 就 应 该 读 一 读 这 本 书 : 



































。 在 文本 编辑 器 或 者 XML 编辑 器 中 创建 SVG 文件 
。 从 已 有 的 矢量 数据 创建 SVG 文件 

。 将 其 他 XML 数据 转换 为 SVG 

。 使 用 JavaScript 操作 SVG 文档 对 象 树 


和 十 、 :二 

选 错 书 的 读者 

如 果 你 只 是 想 查看 SVG 文件 ， 只 需要 安装 一 个 阅读 器 或 者 Web 插件 ， 然 后 下 载 SVG 文件 
查看 就 可 以 了 。 这 种 情况 下 你 并 不 需要 知道 背后 的 原理 ， 除 非 你 想 满足 自己 强烈 的 好 奇 心 。 















































如 有 果 你 想 使 用 带 有 SVG 导出 功能 的 图 像 处 理 软件 来 创建 SVG 文件， 那么 只 需要 阅读 相关 











注 1: 一 种 用 于 文档 格式 的 XML 标记 语言 ， 可 参见 http://zh.wikipedia.org/wiki/XSL-FO。 一 一 译 者 注 
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软件 的 文档 来 学 习 如 何 使 用 软件 的 功能 就 可 以 了 。 


如 果 你 打算 继续 阅读 …… 


如 果 你 确实 适合 阅读 这 本 书 ， 那 么 你 应 该 了 解 ， 本 书 的 大 部 分 读者 都 是 高 级 用 户 ， 他 们 很 
可 能 有 技术 背景 ， 而 不 是 图 形 设计 背景 。 所 以 我 们 不 打算 在 前 面 讲 很 多 非常 基础 的 东西 ， 
但 我 们 希望 没有 XML 或 者 程序 设计 背景 的 人 也 能 阅读 本 书 ， 因 此 也 准备 了 一 些 介绍 性 的 
章节 ， 并 将 它们 放 到 本 书 最 后 的 附录 中 。 如 果 你 没有 使 用 过 XML 或 者 样式 表 (这 可 能 包 
括 一 些 技术 人 员 )， 也 没有 编写 过 程序 ， 可 能 需要 先 翻 到 附录 部 分 。 稍 后 ， 我 们 会 概述 各 
章 和 附录 的 主要 内 容 。 


如 果 你 是 技术 工作 者 ， 也 需要 知道 ， 本 书 并 不 能 将 你 变 成 一 位 艺术 家 ， 就 像 一 本 讲 字 处 理 
算法 的 书 并 不 能 让 你 把 文章 写 得 更 好 一 样 。 本 书 将 展示 SVG 的 很 多 技术 细节 ， 而 如 果 要 
成 为 艺术 家 ， 你 还 需要 学 习 观察 。 除 了 本 书 之 外 ， 你 还 应 该 读 读 Betty Edwards 博士 的 The 
New Drawing on the Right Side of the Brain’。 






































本 书 只 会 给 出 SVG 的 一 些 基本 信息 ， 如 果 你 想 了 解 所 有 信息 ， 请 参考 万 维 网 联盟 的 SVG 
规范 (http://www.w3.org/Graphics/SVG/Overview.htm8)。 


关于 示例 


本 书 中 的 所 有 示例 ， 除 了 涉及 HTML 页 面 的 之 外 ， 全 部 在 运行 在 GNU/Linux 系统 上 的 
Batik SVG viewer 软件 中 测试 通过 。Batik SVG viewer 是 由 Apache 软件 基金 会 下 的 Batik 
项 目 开 发 的 一 款 软件 。 这 款 软件 使 用 Java 开发 ， 跨 平台 ， 并 遵循 Apache 软件 协议 开源 ， 
可 以 从 http://xmlgraphics.apache.org/batik 下 载 。 


书 中 的 所 有 例子 (包括 第 2、13 和 14 章 中 涉及 JavaScript 和 HTML 的 例子 ) 通过 在 
Firefox 和 Chrome 浏览 器 中 加 载 的 方式 进行 了 测试 。 对 SVG 高 级 特性 的 支持 程度 取决 于 


入 Dm 


浏览 器 。 


你 在 看 本 书 中 的 示例 的 时 候 ， 会 发 现 它们 完全 没有 任何 艺术 价值 。 这 是 有 原因 的 。 首 先 ， 
每 个 示例 都 是 为 了 展示 SVG 的 一 个 方面 ， 那 么 它 就 应 该 只 展示 这 一 个 方面 ， 而 不 应 该 有 
其 他 的 视觉 干扰 。 基 次， 本 书 作者 David 在 看 其 他 书 中 那些 漂亮 得 不 可 思议 的 图 形 时 感到 
很 泪 丧 ， 他 心 想 :“ 我 永远 也 画 不 出 这 么 漂亮 的 图 。” 为 了 不 让 你 产生 同样 的 己 开 情绪， 我 
们 有 意 简化 了 这 些 示 例 。 当 你 看 到 它们 的 时 候 ， 你 的 第 一 反应 会 是 :“ 我 可 以 用 SVG 画 出 
比 这 漂亮 得 多 的 东西 | ”你 当然 可 以 ， 然 后 你 就 会 动手 去 画 。 

































































注 2: 该 书 中 文 版 《五 天 学 会 绘画 》 已 由 北方 文艺 出 版 社 出 版 。http://book.douban.com/subject/5263615/。 








本 书 结构 


第 1 章 入 门 指南 
本 章 简要 介绍 了 SVG 的 历史 ， 比 较 了 栅 格 图 形 系统 与 矢量 图 形 系统 ， 最 后 用 一 个 简单 
的 教程 介绍 了 SVG 的 主要 概念 。 


第 2 章 在 网 页 中 使 用 SVG 
本 章 展示 了 在 HTMLS5 文档 中 使 用 SVG 的 各 种 方法 。 


第 3 章 坐标 系统 
如 何在 画图 时 确定 一 个 点 的 位 置 ? 哪个 方向 是 “上 ”? 本 章 解 答 了 这 些 问 题 ， 并 展示 
了 如 何 切换 图 形 中 的 坐标 系统 。 


第 4 章 基本 形状 
本 章 展 示 了 如 何 使 用 SVG 中 的 基本 形状 来 构成 一 个 图 形 ， 这 些 基本 形状 有 : 线 、 长 方 
形 、 多 边 形 、 圆 、 椭 圆 。 本 章 也 讨论 了 如 何 指定 形状 的 轮 廊 和 内 部 颜色 。 

















第 5 章 文档 结构 
在 复杂 的 图 形 中 ， 会 有 一 些 元 素 被 复 用 或 者 是 重复 出 现 。 本 章 会 教 你 如 何 将 对 象 组 合 
成 一 个 整体 ， 使 它们 变 成 一 个 实体 ， 可 以 复 用 。 本 章 也 讨论 了 如 何 使 用 外 部 的 矢量 图 
形 或 者 栅 格 图 形 。 














第 6 章 坐标 系统 变换 

如 果 你 在 一 种 可 伸缩 的 材料 上 画 一 个 正方 形 ， 然 后 水 平 拉 伸 材料 ， 就 会 得 到 一 个 长 方 
形 。 将 材料 的 两 个 对 边 分 别 往 不 同 的 方向 斜 切 ， 你 会 得 到 一 个 平行 四 边 形 。 再 将 这 个 
材料 旋转 45 度 ， 你 会 得 到 一 个 次 形 。 在 本 章 中 ， 你 将 学 到 如 何 对 坐标 系统 进行 移动 、 
旋转 、 缩 放 、 和 斜 切 ， 以 改变 画布 上 图 形 的 形状 。 




















第 7 章 ”路径 
所 有 的 基本 形状 都 是 “路 径 ” 这 个 一 般 概 念 的 特殊 实例 。 本 章 将 展示 如 何 使 用 线 、 贺 
弧 和 复杂 的 曲线 来 描述 形状 的 一 般 轮 廊 。 





第 8 章 图案 和 渐变 

本 章 在 第 4 章 的 基础 上 增加 了 关于 颜色 的 讨论 ， 比 如 如 何 创 建 渐变 色 或 者 如 何 创建 填 
充 模 式 。 

第 9 章 文本 

一 张 图 并 不 只 有 线 和 形状 ， 文 本 也 是 海报 或 者 示意 图 的 重要 组 成 部 分 。 本 章 展 示 了 如 
何 添加 文字 ， 包 括 治 直线 分 布 的 文字 和 沿 指定 路 径 分 布 的 文字 。 





第 10 章 裁剪 和 蒙 版 

本 章 展示 了 如 何 使 用 裁剪 路 径 (clipping path ) ， 让 图 形变 得 好 像 是 从 圆 形 镜 头 、 锁 孔 或 
者 其 他 形状 中 观察 到 的 一 样 。 本 章 还 会 展示 如 何 使 用 遮 四 来 改变 对 象 的 透明 度 ， 使 得 
对 象 的 边缘 呈现 出 “淡出 ”效果 。 








第 11 章 滤 镜 

尽管 SVG 文件 是 用 来 描述 矢量 图 形 的 ， 但 文档 最 终 还 是 在 栅 格 设备 上 被 演 染 的 。 在 
本 章 中 ， 你 会 学 到 如 何 应 用 面向 栅 格 图 形 的 滤 镜 ， 来 使 图 形变 得 模糊 ， 改 变 它 的 颜色 ， 
或 者 产生 一 些 灯光 效果 。 








第 12 章 SVG 动画 

本 章 展示 了 如 何 使 用 SVG 内 置 的 动画 能 力 。 

第 13 章 添加 交互 

除了 使 用 SVG 内 置 的 动画 ， 你 还 可 以 使 用 CSS 和 JavaScript 来 动态 控制 图 形 的 属性 。 





第 14 章 使 用 SVG DOM 
本 章 进一步 深入 讨论 了 使 用 JavaScript 操作 文档 对 象 模型 。 还 简要 介绍 了 为 使 用 SVG 
而 设计 的 一 个 JavaScript 库 。 





第 15 章 生成 SVG 

尽管 可 以 从 零 开始 创建 一 个 SVG 文件 ， 但 很 多 人 希望 将 已 有 的 矢量 数据 或 者 XML 数 
据 以 图 表 的 形式 展现 出 来 。 本 章 将 讨论 使 用 编程 语言 和 XSLT 来 从 已 有 数据 创建 SVG 
的 方法 。 














附录 A SVG 中 需要 的 XML 知识 

SVG 是 XML (Extensible Markup Language， 可 扩展 标记 语言 ) 的 一 种 应 用 。 如 果 你 ? 
有 使 用 过 XML， 应 该 读 一 下 本 附录 ， 以 熟悉 这 项 用 来 组 织 数据 和 文档 的 异常 强大 和 加 
活 的 技术 。 


附录 B 样式 表 介绍 

你 可 以 使 用 样式 表 来 为 SVG 文档 中 的 特定 元 素 指定 一 些 视觉 属性 。 它 们 和 HTML 文档 
使 用 的 样式 表 几 乎 完全 一 样 。 如 果 你 没有 使 用 过 样式 表 ， 应 该 看 看 这 部 分 对 样式 表 的 
简要 介绍 和 解析 。 





























附录 C 编程 概念 
Wow 没有 大 多 编程 经 验 ， 应 该 读 一 下 这 部 分 ， 以 便 了 解 程序 员 
说 的 “对 和 象 模型 ” 函数 ”是 什么 。 


附录 D 矩阵 代数 
尽管 不 是 很 有 必要 ， 但 是 要 完全 理解 SVG 中 的 坐标 变换 和 滤 镜 效果 的 话 ， 理 解 矩 阵 代 








数 是 很 有 帮助 的 。 和 矩阵 代数 就 是 用 来 计算 坐标 和 像素 的 数学 知识 。 本 附录 重点 关注 算 


阵 代 数 的 基础 部 分 。 


附录 EE 创建 字体 
TrueType 字体 会 以 矢量 图 形 (字符 ) 来 


展示 文字 。 本 附录 展示 了 如 何 使 用 你 最 喜欢 的 


字体 并 将 它们 转换 为 SVG 文档 中 可 以 使 用 的 路 径 。 


附录 下 将 圆 级 转换 为 不 同 的 格式 





很 多 软件 中 的 圆 绝 使 用 的 是 “中 心 + 角度 ”的 格式 。 本 附录 提供 了 将 这 种 格式 与 SVG 


格式 互相 转换 的 代码 。 


排版 约定 


本 书 使 用 了 下 列 排版 约定 。 





本 


楷体 
表示 新 术语 或 强调 的 内 容 。 
等 宽 字 体 (Constant width) 


表示 程序 片段 ， 以 及 正文 中 出 现 的 变量 
句 和 关键 字 等 。 


加 粗 等 宽 字 体 (Constant width botLd ) 
表示 应 该 由 用 户 输入 的 命令 或 其 他 文本 。 














、 国 数 名 、 数 据 库 、 数 据 类 型 、 环 境 变 量 、 


形 


该 图 标 表示 提示 、 建 议 或 一 般 注 记 。 











区 使 用 编号 来 表示 代码 清单 中 有 趣 的 点 。 


方 给 出 了 相应 的 解释 。 这 里 有 一 个 例子 : 


Roses are red, 

Voilets are blue. © 
Some poems rhyme; 

This one doesn't. @ 


编号 采用 实心 圆 加 数字 的 形式 。 代 码 清单 的 下 





xvi 


| hs 


出 吾 


@ 紫罗兰 的 实际 颜色 值 为 #9933cc。 
@ 这 首 诗 使 用 的 文学 手法 叫 作 意外 的 结局 。 


许多 示例 都 可 以 在 线 测 试 ， 并 且 文 中 都 给 出 了 URL。 有 些 在 线 示例 还 包含 可 以 编辑 的 标 
记 ， 点 击 刷 新 按钮 可 以 查看 改变 后 的 结果 。 也 可 以 点 击 重 置 按钮 回 到 示例 的 原始 状态 。 























Safari? Books Online 


Safari Books Online (http:/www.safaribooksonline.com) 是 应 运 
Safa 队 生硬 生 的 数字 图 书馆 。 它 同时 以 图 书 和 视频 的 形式 出 版 世界 顶级 

Books Online 技术 和 商务 作家 的 专业 作品 。 技 术 专 家 、 软 件 开发 人 员 、Web 
设计 师 、 商 务 人 士 和 创意 专家 等 ， 在 开展 调研 、 解 决 问 题 、 学 习 和 认证 培训 时 ， 都 将 Safari 
Books Online 视 作 获取 资料 的 首选 渠道 。 











对 于 组 织 团 体 、 政 府 机 构 和 个 人 ，Safari Books Online 提供 各 种 产品 组 合 和 灵活 的 定 
价 策略 。 用 户 可 通过 一 个 功能 完备 的 数据 库 检 索 系 统 访问 O'Reilly Media、Prentice 


Hall Professional、Addison-Wesley Professional、 Microsoft Press、Sams、Que、Peachpit 








Press、 Focal Press、 Cisco Press、 John Wiley & Sons、 Syngress、 Morgan Kaufmann、IBM 
Redbooks、 Packt、Adobe Press、FT Press、Apress、Manning、New Riders、McGraw-Hill、 
Jones & Bartlett、Course Technology 以 及 其 他 几 十 家 出 版 社 的 上 千 种 图 书 、 培 训 视 频 和 正 
式 出 版 之 前 的 书稿 。 要 了 解 Safari Books Online 的 更 多 信息 ， 我 们 网 上 见 。 


联系 我 们 


请 把 对 本 书 的 评价 和 问题 发 给 出 版 社 。 











美国 : 
O’Reilly Media, Inc. 
1005 Gravenstein Highway North 
Sebastopol, CA 95472 





中 国 





北京 市 西城 区 西直门 南大 街 2 号 成 铭 大 厦 C 座 807 室 (100035) 
奥 菜 利 技术 咨询 (北京 ) 有 限 公 司 


O’Reilly 的 每 一 本 书 都 有 专属 网 页 ， 你 可 以 在 那儿 找到 本 书 的 相关 信息 ， 包 括 勘误 表 、 示 
例 代码 以 及 其 他 信息 。 本 书 的 网 站 地 址 是 : 
http://shop.oreilly.com/product/0636920032335.do 





























对 于 本 书 的 评论 和 技术 性 问题 ， 请 发 送 电子 邮件 到 : bookquestions@oreilly.com。 








要 了 解 更 多 O'Reilly 图 书 、 培 训 课程 、 会 议和 新 闻 的 信息 ， 请 访问 以 下 网 站 : 


http://www.oreilly.com 
我 们 在 Facebook 的 地 址 如 下 : http://facebook.com/oreilly 
请 关注 我 们 的 Twitter 动态 : http://twitter.com/oreillymedia 


我 们 的 YouTube 视频 地 址 如 下 : http://www.youtube.com/oreillymedia 
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就 是 非常 受 欢 迎 的 介绍 SVG 的 图 书 。 作 为 一 个 曾经 对 浏览 器 实现 的 各 种 怪异 行为 感到 困 
惑 不 解 的 过 来 人 ， 我 真 的 希望 这 一 版 能 将 我 在 学 习 SVG 时 的 困惑 一 一 解释 清楚 。 























我 还 要 特别 感谢 我 的 丈夫 Chris， 他 给 了 我 极 大 的 支持 ， 但 也 时 常 提醒 我 暂停 工作 ， 去 吃 
饭 、 睡 觉 或 者 去 呼吸 些 新 鲜 空 气 。 








第 1 章 


入 门 指南 








SVG， 即 可 缩放 矢量 图 形 (Scalable Vector Graphics) ， 是 一 种 XML 应 用 ， 可 以 以 一 种 简 
洁 、 可 移植 的 形式 表示 图 形 信息 。 目 前 ， 人 们 对 SVG 越 来 越 感 兴趣 。 大 多 数 现代 浏览 器 
都 能 显示 SVG 图 形 ， 并 且 大 多 数 矢 量 绘图 软件 都 能 导出 SVG 图 形 。 本 章 首 先 介绍 两 大 计 
算 机 图 形 系统 ， 然 后 讨论 SVG 的 适用 情境 ， 最 后 分 析 一 个 简单 的 示例 ， 甚 中 用 到 的 很 多 
概念 将 在 后 续 章 节 中 详细 探讨 。 


1.1 图 形 系统 


计算 机 中 描述 图 形 信息 的 两 大 系统 是 栅 格 图 形 (raster graphics) 和 矢量 图 形 (vector graphics ) 。 


1.1.1 栅 格 图 形 


在 栅 格 图 形 系统 中 ， 图 像 被 表示 为 图 片 元 素 或 者 像素 的 长 方形 数组 (如 图 1-1 所 示 )。 每 个 
像素 用 其 RGB 颜色 值 或 者 颜色 表 内 的 索引 表示 。 这 一 系列 像素 也 称 为 位 图 (bitmap)， 通 
常 以 某 种 压缩 格式 存储 。 由 于 大 多 数 现代 显示 设备 也 是 栅 格 设备 ， 显 示 图 像 时 仅 需要 一 个 
阅读 器 将 位 图 解压 缩 并 将 它 传输 到 屏幕 上 。 



























































1-1: 栅 格 长 方形 


1.1.2 矢量 图 形 
在 矢量 图 形 系统 中 ， 图 像 被 描述 为 一 系列 几何 形状 (如 图 1-2 所 示 )。 矢 量 图 形 阅 读 器 接受 









































在 指定 坐标 集 上 绘制 形状 的 指令 ， 而 不 是 接受 一 系列 已 经 计算 好 的 像素 。 

















图 1-2: 矢量 长 方形 


想象 一 下 在 一 张 绘 图 纸 上 作 图 的 过 程 ， 栅 格 图 形 的 工作 就 像 是 描述 哪个 方 格 应 该 填充 什么 
颜色 ， 而 矢量 图 形 的 工作 则 像 是 描述 要 绘制 从 某 个 点 到 另 一 个 点 的 直线 或 曲线 。 有 些 人 把 
矢量 图 形 描述 为 一 组 绘图 指令 ， 而 位 图 〈 栅 格 图 形 ) 则 是 在 特定 的 位 置 填充 颜色 的 点 。 矢 

















量 图 形 “ 知 道 ” 









































”它们 是 什么 一 一 方块 “知道 ” 它 是 一 个 方块 ， 文 本 “知道 ” 它 是 文本 。 由 


于 矢量 图 形 是 对 象 而 不 是 一 系列 像素 ， 因 此 矢量 对 象 可 以 改变 它们 的 形状 和 颜色 ， 而 位 图 





则 不 能 。 此 外 


， 所 有 文本 都 是 可 搜索 的 ， 因 为 无 论 看 起 来 是 什么 样子 或 者 做 了 怎样 的 旋转 








或 变换 ， 它 们 实际 上 还 是 文本 。 


还 可 以 将 栅 格 





图 形 想象 为 画布 上 的 绘画 ， 而 矢量 图 形 则 是 由 可 伸缩 材料 构成 的 直线 和 形 














状 ， 它们 可 以 在 背景 上 移动 。 


1.1.3” 栅 格 图 形 的 用 途 
机 格 图 像 最 适合 用 来 表示 照片 ， 因 为 照片 很 少 由 明显 的 线条 和 曲线 组 成 。 扫 描 的 图 像 也 通 


常 被 存储 为 位 











图 ， 即 使 它 最 初 可 能 是 一 张 线 图 但 人 们 也 希望 存储 的 是 整个 图 像 ， 而 并 不 











关心 它 的 各 个 组 成 部 分 。 比 如 传真 机 就 不 关心 你 绘制 的 是 什么 ， 它 只 是 使 用 栅 格 图 形 将 像 


素 从 一 个 地 方 





专 输 到 另 一 个 地 方 。 








创建 机 格格 式 
图 像 的 方式 ( 





图 像 的 工具 很 多 ， 而 且 通 常 比 许 多 矢量 图 形 的 工具 更 好 用 。 压 缩 和 存储 栅 格 
格式 ) 有 很 多 种 ， 并 且 这 些 格式 的 内 部 规则 都 是 公开 的 。 用 于 读 写 JPEG、 


GIF 和 PNG 等 压缩 格式 的 程序 库 唾 手 可 得 。 这 也 是 SVG 出 现 之 前 Web 浏览 器 只 支持 栅 格 
图 像 的 部 分 原因 。 




















1.1.4 矢量 图 形 的 用 途 
矢量 图 形 用 于 以 下 领域 。 











。 计算 机 辅助 绘图 (Computer Assisted Drafting，CAD) 程序 ， 因 为 精确 地 测量 和 放大 绘 
图 以 便 查 看 细节 非常 重要 。 

。 设计 用 于 高 分 辩 率 打印 图 像 的 程序 ， 例 如 Adobe Illustrator。 

。 Adobe PostScript 打印 和 成 像 语言 ， 打 印 的 每 个 字符 都 用 直线 和 曲线 来 描述 。 

。 基于 矢量 图 形 的 Macromedial Flash 系统 ， 用 来 设计 动画 、 演 示 和 网 站 。 





























由 于 大 多 数 这 类 文件 都 编码 为 二 进 制 格式 或 打包 好 的 比特 流 ， 所 以 有 一 些 工作 很 难 做 ， 
比如 让 浏览 器 或 者 其 他 用 户 代理 2 解析 内 和 内 的 文本 , 或 者 让 服务 器 基于 外 部 数据 动态 创建 
矢量 图 形 文件 。 大 多 数 矢 量 图 形 的 内 部 规则 都 是 专用 的 ， 浏 览 、 创 建 这 些 图 形 的 代码 很 
难 获得 。 


1.2 可 缩放 


尽管 矢量 图 形 不 像 栅 格 图 形 那么 流行 ， 但 它 可 以 缩放 而 不 损失 图 像 质量 ， 因 而 在 许多 应 用 
程序 中 具有 不 可 估量 的 价值 。 例 如 ， 这 里 有 两 个 猫 图 像 。 图 1-3 是 栅 格 图 像 ， 图 1-4 是 一 
个 矢量 图 像 。 它 们 都 显示 在 一 个 PPT 为 72 的 屏幕 上 。 
















































































图 1-3: 栅 格 形式 的 猫 图 像 














图 1-4: 矢量 形式 的 猫 图 像 


当 显 示 程 序 放大 栅 格 图 像 时 ， 它 必须 以 某 种 方式 扩大 每 个 像素 。 要 想 将 图 像 放大 至 四 倍 ， 
最 简单 的 方式 就 是 让 每 个 像素 放大 为 原来 的 四 倍 。 如 图 1-5 所 示 ， 结 果 并 不 是 很 理想 。 


注 1: Macromedia 已 被 Adobe 收购 。 旗 下 产品 也 分 别 改 名 。 一 一 译 者 注 
注 2: 指 浏 览 网 页 或 者 其 他 文件 的 设备 或 软件 。 一 一 译 者 注 
注 3: PPI， 即 pixels per inch， 每 英寸 的 像素 点 数量 。 一 一 译 者 注 
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图 1-5: 放大 的 栅 格 图 像 


尽管 可 以 使 用 边缘 检测 和 反 锯齿 这 类 技术 优化 放大 后 的 图 像 ， 但 是 这 些 技术 很 耗 时 。 此 


外 ， 由 于 栅 格 图 像 中 的 所 有 像素 都 是 未 知 的 ， 
的 形状 。 反 锯齿 的 结果 看 起 来 如 图 1-6 所 示 。 





因此 并 不 能 保证 相关 算法 能 正确 检测 到 边缘 

















图 1-6: 放大 后 的 反 锯齿 栅 格 图 像 





另 一 方面 ， 将 矢量 图 像 放 大 为 原来 的 四 倍 时 ， 只 需 图 像 显示 程序 将 形状 的 所 有 坐标 都 乘 以 
4， 然 后 用 显示 设备 的 完整 分 辩 率 重新 绘制 它们 即 可 。 因 此 ， 在 如 图 1-7 所 示 的 DPI 为 72 
的 屏幕 截图 中 ， 线 条 边缘 很 清晰 ， 与 放大 后 的 栅 格 图 像 相 比 ， 锯 齿 明 显 少 多 了 。 









































图 1-7: 放大 后 的 矢量 图 形 





1.3 SVG 的 作用 


1998 年 ， 万 维 网 联盟 成 立 了 一 个 工作 小 组 ， 负 责 开 发 作为 XML 应 用 的 矢量 图 形 表示 方 
法 。 由 于 SVG 是 XML 程序 ， 所 以 图 像 的 有 关 信 息 被 存储 为 纯 文 本 ， 而 且 它 还 具有 XML 
的 开放 性 、 可 移植 性 以 及 可 交互 性 。 


CAD 和 图 形 设计 程序 通常 使 用 特定 的 二 进 制 格式 存储 绘图 信息 。 当 它们 拥有 导入 和 导出 
SVG 格式 图 像 的 能 力 后 ， 这 类 应 用 程序 就 有 了 一 个 通用 的 标准 格式 来 交换 信息 。 


由 于 SVG 就 是 一 个 XML 应 用 ， 因 此 它 能 与 其 他 XML 处 理 程 序 结合 使 用 。 例 如 ， 数 学 教 
科 书 可 以 使 用 XSL 来 对 说 明 性 文本 进行 格式 化 对 象 ， 使 用 MathML 描述 方程 ， 以 及 使 用 
SVG 为 方程 生成 图 表 。 


SVG 工作 组 制订 的 规范 是 一 个 万 维 网 联盟 官方 推荐 规范 。 诸 如 Adobe Illustrator 和 Inkscape 
这 类 应 用 程序 都 可 以 导入 和 导出 SVG 格式 的 绘图 。 在 Web 中 ， 许 多 浏览 器 都 原生 支持 
SVG， 而 且 SVG 具有 很 多 与 HTML 中 CSS 样式 相同 的 变换 和 动画 能 力 。 由 于 SVG 文件 
就 是 XML， 因 此 其 中 的 文本 可 以 被 使 用 任何 能 够 解析 XML 的 用 户 代 理 读 取 显 示 。 


1.4 创建 一 个 SVG 图 像 


本 节 你 会 看 到 一 个 SVG 文本 ， 内 容 是 本 章 前 面 见 过 的 猫 的 图 像 。 这 个 例子 介绍 了 很 多 概 
念 ， 在 后 续 章 市 中 会 对 这 些 概念 进行 详细 介绍 。 这 个 文件 很 好 地 演示 了 如 何 编写 示例 文 
件 ， 但 你 在 创建 项 目 中 的 SVG 文件 时 ， 并 不 一 定 要 按照 这 种 方式 编写 。 


1.4.1 文档 结构 

示例 1-1 以 标准 的 XML 处 理 指令 和 DOCTYPE 声明 开始 。 根 元 素 <svg> 以 像素 为 单位 定义 了 
整个 图 像 的 width 和 height， 还 通过 xmlns 属性 定义 了 SVG 的 命名 空间 。<title> 元 素 的 
内 容 可 以 被 阅读 器 显示 在 标题 栏 上 或 者 是 作为 鼠标 指针 指向 图 像 时 的 提示 ，<desc> 元 素 允 
许 我 们 为 图 像 定义 完整 的 描述 信息 。 


示例 1-1: SVG 文档 的 基本 结构 
<?xml version="1.0"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 




























































































<svg width="140" height="170" xmlns="http://www.w3.org/2000/svg"> 
<title>Cat</title> 

<desc>Stick Figure of a Cat</desc> 

<!-- 在 这 里 绘制 图 像 - -> 


</svg> 








注 4: 当前 稳定 的 XML 和 SVG 版 本 都 是 1.1。 更 多 信息 可 参考 : W3C-SVG1.1 规范 (http://www.w3.org/TR/ 
SVG11/) 和 W3C-XML 规范 (http://www.w3.org/TR/2006/REC-xml11-20060816)。 一 一 译 者 注 
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1.4.2 ”基本 形状 

你 可 以 添加 一 个 <circle> 元 素来 绘制 猫 的 脸 部 。 这 个 元 素 的 属性 指定 中 心 点 x 坐标 和 yy 坐 
标 以 及 半径 。 点 (0,0) 为 图 像 的 左上 角 。 水 平 向 右 移 动 时 x 坐标 增 大 ， 垂 直 向 下 移动 时 y 坐 
标 增 大 。 


这 个 圆 的 位 置 和 尺寸 是 绘图 结构 的 一 部 分 。 绘 图 的 颜色 是 表现 (presentation) 的 一 部 分 。 
按照 XML 程序 的 惯例 ， 为 了 保持 最 大 的 灵活 性 ， 应 该 分 离 结构 和 表现 。 表 现 信息 包含 在 
style 属性 中 。 它 的 值 是 一 系列 表现 属性 和 值 ， 正 如 附录 B 中 所 述 。 这 里 轮廓 的 画笔 颜色 
为 黑色 ， 填 充 颜 色 为 none 以 使 猫 的 脸 部 透明 。SVG 见 示例 1-2， 其 结果 见 图 1-8。 
































示例 1-2: 基本 形状 
http://oreillymedia.github.io/svg-essentials-examples/ch01/ex01-02.html 
<?xml version="1.0"?> 


<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 


<svg width="140" height="170" 
xmlns="http://www.w3.0rg/2000/svg"> 

<title>Cat</title> 

<desc>Stick Figure of a Cat</desc> 


<circle cx="70" cy="95" r="50" style="stroke: black; fill: none"/> 


</svg> 














图 1-8: 阶段 一 ， 绘 制 贺 


1.4.3 ”指定 样式 属性 

接 下 来 我 们 在 示例 1-3 中 添加 两 个 圆 作 为 眼睛 。 虽 然 填充 颜色 和 画笔 颜色 也 是 表现 的 一 部 
分 ,但 是 SVG 允许 我 们 使 用 单独 的 属性 指定 它们 。 在 这 个 示例 中 ， 填 充 (fill) 和 轮廓 
画笔 颜色 (stroke) 写 在 两 个 单独 的 属性 中 ， 而 不 是 全 部 写 在 style 属性 中 。 你 可 能 并 不 
会 经 常 使 用 这 种 方法 ， 在 5.2.4 节 会 详细 讲述 这 些 内 容 。 这 里 提 及 它 只 是 为 了 证 明 可 以 这 
么 做 。 结 果 如 图 1-9 所 示 。 

















为 了 节省 空间 ， 这 里 省 略 了 <?xmtL ...?> 和 <!DOCTYPE?>。 





示例 1-3: 基本 形状 一 填充 圆 
http://oreillymedia.github.io/sve-essentials-examples/ch01/ex01-03.html 


<svg width="140" height="170" xmlns="http://www.w3.org/2000/svg"> 
<title>Cat</title> 
<desc>Stick Figure of a Cat</desc> 


<circle cx="70" cy="95" r="50" style="stroke: black; fill: none"/> 

<circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/> 

<circle cx="85" cy="80" r="5" stroke="black" fill="#339933"/> 
</svg> 














1-9: 阶段 二 ， 绘 制 险 和 眼睛 


1.4.4 图 形 对 象 分 组 

示例 1-4 使 用 两 个 <Line> 元 素 在 猫 的 右 脸 上 添加 了 胡须 。 我 们 想 把 这 些 胡须 作为 一 个 部 件 
( 稍 后 你 会 明白 为 什么 )， 所 以 把 它们 包装 在 分 组 元 素 <g> 里 面 ， 然 后 给 它 一 个 id。 YY 
以 通过 指定 起 点 和 终点 x 坐标 和 yy 坐标 (分别 为 x1 和 yl 以 及 x2 和 y2) 的 方式 绘制 一 
直线 。 结 果 如 图 1-10。 


示例 1-4: 基本 形状 一 一 线 
htip://oreillymedia.github.io/sveg-essentials-examples/ch01/ex01-04.html 




















<svg width="140" height="170" 
xmlns="http://www.w3.o0rg/2000/svg"> 

<title>Cat</title> 

<desc>Stick Figure of a Cat</desc> 


<circle cx="70" cy="95" r="50" style="stroke: black; fill: none;" /> 
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933" /> 
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933" /> 
<g id="whiskers"> 
<Line x1="75" y1="95" x2="135" y2="85" style="stroke: black;" /> 
<line x1="75" y1="95" x2="135" y2="105" style="stroke: black;" /> 
</g> 
</svg> 











1-10; 阶段 三 ， 在 右 脸 上 添加 胡须 
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1.4.5 ”变换 坐标 系统 

现在 我 们 使 用 <use> 复 用 胡须 分 组 并 将 它 变换 (transform) 为 左 侧 胡 须 。 示 例 1-5 中 ， 
首先 在 scale 变换 中 对 x 坐标 乘 以 -1， 翻 转 了 坐标 系统 。 这 意味 着 原始 坐标 系统 中 的 点 
(75,95) 现在 位 于 (-75,95)。 在 新 的 坐标 系统 中 ， 向 左 移动 会 使 坐标 增 大 。 这 就 意味 着 必须 
将 坐标 系统 向 右 transLate (平移 ) 140 个 像素 〈( 负 值 )， 才 能 将 它们 移 到 目标 位 置 ， 如 图 
1-11 所 示 。 


示例 1-5: 变换 坐标 系统 
http://oreillymedia.github.io/sveg-essentials-examples/ch01/ex01-05.html 























<svg width="140" height="170" 
xmlns="http://www.w3.o0rg/2000/svg" 
xmlns:xlink="http://www.w3.o0rg/1999/xlink"> 
<title>Cat</title> 
<desc>Stick Figure of a Cat</desc> 


<circle cx="70" cy="95" r="50" style="stroke: black; fill: none;" /> 
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933" /> 
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933" /> 
<g id="whiskers"> 
<Line x1="75" y1="95" x2="135" y2="85" style="stroke: black;" /> 
<line x1="75" y1="95" x2="135" y2="105" style="stroke: black;" /> 
</g> 
<use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)" /> 
</svg> 














图 1-11; 阶段 四 ， 添 加 左 侧 胡须 


<use> 元 素 中 的 xLink:href 属性 在 不 同 的 命名 空间 中 (详情 请 查看 附录 A)。 为 了 确保 
SVG 文档 能 在 所 有 SVG 阅读 器 中 工作 ， 我 们 必须 在 开始 的 <svg> 标签 中 添加 xmLns:xLink 





transform 属性 依次 列 出 了 所 有 的 变换 ， 不 同 的 变换 之 间 使 用 空格 分 隔 。 


1.4.6 ”其 他 基本 图 形 
示例 1-6 使 用 <poLyLine> 元 素 构 建 了 嘴 和 耳 打 ， 它 接受 一 对 x 和 yy 坐标 作为 points 属 
值 。 你 可 以 根据 喜好 使 用 空格 或 者 辟 号 分 隔 这 些 数值 。 结 果 如 图 1-12 所 示 。 





me 


生 的 




















示例 1-6: 基本 图 形 一 一 折线 
http://oreillymedia.github.io/sve-essentials-examples/ch01/ex01-06.html 





<svg width="140" height="170" 
xmlns="http://www.w3.o0rg/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink"> 
<title>Cat</title> 
<desc>Stick Figure of a Cat</desc> 


<circle cx="70" cy="95" r="50" style="stroke: black; fill: none;" /> 
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933" /> 
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933" /> 
<g id="whiskers"> 
<Line x1="75" y1="95" x2="135" y2="85" style="stroke: black;" /> 
<Line x1="75" y1="95" x2="135" y2="105" style="stroke: black;" /> 
</g> 
<use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)" /> 
<!-- 耳 打 --> 
<polyline points="108 62, 90 10, 70 45, 50, 10, 32, 62" 
style="stroke: black; fill: none;" /> 
<!-- 嘴 --> 
<polyline points="35 110, 45 120, 95 120, 105, 110" 
style="stroke: black; fill: none;" /> 
</svg> 














1-12: 阶段 五 ,添加 耳朵 和 由 


1.4.7 ”路径 


所 有 的 基本 形状 实际 上 都 是 通用 的 <path> 元 素 的 快捷 写法 ， 示 例 1-7 中 使 用 <path> 元 素 
为 猫 添加 了 鼻子 ， 结 果 如 图 1-13 所 示 。 这 个 元 素 被 设计 用 来 以 尽 可 能 简洁 的 方式 指定 路 
径 或 者 一 系列 直线 和 曲线 。 示 例 1-7 中 的 路 径 翻 译 过 来 就 是 “移动 到 坐标 (75,90)。 绘 制 一 
条 到 坐标 (65,90) 的 直线 。 然 后 以 x 半径 为 5、y 半径 为 10 绘制 一 个 覃 圆 ， 最 后 回 到 坐标 
(75,90) 处 ”。 

















示例 1-7: 使 用 <path> 元 素 
http://oreillymedia.github.io/sve-essentials-examples/ch01/ex01-07.html 
<svg width="140" height="170" 


xmlns="http://www.w3.o0rg/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink"> 
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<title>Cat</title> 
<desc>Stick Figure of a Cat</desc> 


<circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/> 
<circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/> 
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933"/> 
<g id="whiskers"> 
<Line x1="75" y1="95" x2="135" y2="85" style="stroke: black;"/> 
<Line x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/> 
</g> 
<use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)"/> 
<!-- 耳 打 --> 
<polyline points="108 62, 90 10, 70 45, 50, 10, 32, 62" 
style="stroke: black; fill: none;" /> 
<!-- 中 --> 
<polyline points="35 110, 45 120，95 120, 105, 110" 
style="stroke: black; fill: none;" /> 
<!-- 鼻子 --> 
<path d="M 75 90 L 65 90 AS51000075 90" 
style="stroke: black; fill: #ffcccc"/> 
</svg> 














1-13; 阶段 六 ， 添 加 鼻子 


1.4.8 文本 

最 后 ， 由 于 这 个 图 像 绘制 得 很 粗糙 ， 所 以 用 户 很 可 能 看 不 出 这 是 一 只 猫 。 因 此 ， 示 例 1-8 
为 这 个 图 像 添加 了 一 些 文本 作为 标记 。 在 <text> 元 素 中 ,x 和 y 属性 用 于 指定 文本 的 位 
置 ， 它 们 也 是 结构 的 一 部 分 。 字 体 和 字号 是 表现 的 一 部 分 ， 因 而 也 是 style 属性 的 一 部 分 。 
与 你 见 过 的 其 他 元 素 不 同 ，<text> 是 一 个 容器 元 素 ， 它 的 内 容 是 你 想 要 显示 的 文本 。 图 
1-14 展示 了 最 终结 果 。 




















示例 1-8: 添加 标记 
htip://oreillymedia.github.io/sve-essentials-examples/ch01/ex01-08.html 


<svg width="140" height="170" 
xmlns="http://www.w3.o0rg/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink"> 
<title>Cat</title> 
<desc>Stick Figure of a Cat</desc> 


<circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/> 
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<circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/> 
<circle cx="85" cy="80" r="5" stroke="black" fill="#339933"/> 
<g id="whiskers"> 
<Line x1="75" y1="95" x2="135" y2="85" style="stroke: black;"/> 
<Line x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/> 
</g> 
<use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)"/> 
<!-- 耳 打 --> 
<polyline points="108 62, 90 10, 70 45, 50, 10, 32, 62" 
style="stroke: black; fill: none;" /> 
<!-- 中 --> 
<polyline points="35 110, 45 120, 95 120, 105, 110" 
style="stroke: black; fill: none;" /> 
<!-- 鼻子 --> 
<path d="M 75 90L695990A5100007590" 
style="stroke: black; fill: #ffcccc" /> 
<text x="60" y="165" style="font-family: sans-serif; font-size: 14pt; 
stroke: none; fill: black;">Cat</text> 
</svg> 





Cat 











图 1-14; 阶段 七 ， 带 有 文本 标记 的 完整 图 像 
有 关 SVG 的 简单 介绍 到 此 结束 ， 接 下 来 的 几 章 将 会 深入 探究 这 些 概念 。 
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在 网 页 中 使 用 SVG 


约翰 邓 恩 说 过 ,没有 人 是 孤岛 ， 同 样 SVG 也 不 是 孤立 存在 的 。 当 然 ， 你 可 以 将 SVG 图 





像 看 作 是 在 Web 浏览 器 或 者 SVG 阅读 器 中 的 一 个 独立 文件 。 本 和 








区 中 的 许多 示例 都 是 这 样 


运作 的 。 但 是 在 另外 一 些 情况 下 ， 我 们 希望 将 图 形 集成 在 一 个 较 大 的 文档 中 ， 其 中 包含 文 
本 、 表 单 或 者 其 他 仅 使 用 SVG 无 法 轻松 显示 的 内 容 。 本 章 描述 了 将 SVG 集成 到 HTML 以 

















及 其 他 类 型 文档 中 的 各 种 方式 。 














图 2-1 展示 了 第 1 章 中 绘制 的 猫 ， 分 别 以 4 种 不 同 的 方式 插入 HTML 页 面 。 


乎 相同 ， 但 是 每 种 方法 都 有 其 优点 和 局 限 性 。 


2.1 将 SVG 作为 图 


像 











结果 看 起 来 几 











SVG 是 一 种 图 像 格式 ， 因 此 可 以 使 用 与 其 他 图 像 类 型 相同 的 方式 包含 在 HIML 页 面 中 。 
具体 可 以 采用 两 种 方法 : 将 图 像 包含 在 HIML 标记 的 <img> 元 素 内 ( 当 图 像 是 页 面 的 基本 























组 成 部 分 时 ， 推 荐 这 种 方式 ) ; 或 者 将 图 像 作 为 另 一 个 元 素 的 CSS 样式 属性 插入 〈 当 图 像 


主要 用 来 装饰 时 ， 推 荐 这 种 方式 )。 





将 SVG 文件 作为 图 像 包 含 进来 时 ， 无 论 使 用 哪 种 方法 ， 都 具有 一 定 的 局 限 性 。 图 像 泻 染 
( 即 “绘制 ”， 也 就 是 SVG 代码 被 转换 为 栅 格 图 像 以 用 于 显示 ) 时 与 主页 面 是 分 离 的 ， 而 














且 无 法 在 两 者 之 间 进 行 通信 。 主 页 画 


i 上 的 样式 对 SVG 无 效 。 所 以 如 果 











或 者 要 定义 相对 于 字体 大 小 的 长 度 值 ， 那 么 你 可 能 需要 在 SVG 代码 内 


体 大 小 。 此 外 ， 运 行 在 主页 面 上 的 有 





尔 的 图 像 包含 文本 
部 定义 一 个 默认 字 





[本 也 无 法 感知 或 者 修改 SVG 的 文档 结构 。 











将 SVG 作为 图 像 将 SVG 作为 CSS 背 景 











Cat Cat 














将 SVG 作为 对 象 内 联 SVG 


Cat 




















2-1: 使 用 四 种 方式 在 Web 页 面 中 插入 SVG 的 屏幕 截图 


在 SVG 被 作为 图 像 引用 时 ， 大 多 数 Web 浏览 器 都 不 会 加 载 SVG 自己 引用 的 文件 ， 包 括 
其 他 图 像 文件 、 外 部 脚本 ， 甚 至 是 Web 字体 文件 。 根 据 浏览 器 以 及 用 户 的 安全 设置 不 同 ， 
SVG 文件 内 定义 的 脚本 也 可 能 不 会 运行 ，URL 片段 (URL 中 # 后 面 的 部 分 ， 表 示 文 件 的 
哪 部 分 是 你 感 兴趣 的 ) 也 可 能 被 忽略 。 在 支持 SVG 图 像 的 浏览 器 中 ， 图 像 中 的 动画 〈 详 
见 第 12 章 ) 是 支持 的 。 


2.1.1 在 <img> 元 素 内 包含 SVG 

HTML <img> 元 素 定义 了 一 个 空间 ， 表 示 阐 览 器 应 该 将 图 像 绘制 到 这 个 空间 中 。 要 使 用 的 
图 像 文件 指定 在 src (source) 属性 内 。 在 <img> 元 素 内 包含 SVG 图 像 非 常 简 单 ， 只 需 设 
置 src 指向 Web 服务 器 上 SVG 文件 的 位 置 即 可 。 当 然 ， 你 还 应 该 使 用 alt 或 者 title 属 
性 给 出 图 像 描 述 文本 ， 以 便 用 户 在 不 能 看 到 图 像 时 仍然 能 理解 它 代 表 什 么 。 例 如 ; 





















































<img src="cat.svg" title="Cat Image" 
alt="Stick Figure of a Cat" /> 


虽然 大 多 数 Web 浏览 器 现在 都 支持 使 用 SVG 作为 图 像 ， 但 一 些 老 式 浏览 器 
却 不 知道 该 如 何 泻 染 文件 ， 会 显示 一 个 破碎 的 文件 图 标 (或 者 什么 都 不 显 
示 )。 还 有 一 些 浏 览 器 可 能 需要 你 确认 你 的 Web 服务 器 为 以 .svg 结尾 的 文 
件 声明 了 正确 的 媒体 类 型 头 (image/svg+xml)。 
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图 像 的 高 度 和 宽度 可 以 使 用 属性 或 者 CSS 属性 (优先 考虑 ) 设置 。 其 他 CSS 属性 控制 
Web 页 面 内 图 像 的 位 置 。 如 果 不 指 定 <img> 元 素 的 尺寸 ， 就 会 使 用 图 像 文件 固有 的 尺寸 。 
如 果 只 指定 高 度 (宽度)， 宽 度 (高 度 ) 就 会 按 比 例 缩放 ， 以 使 高 宽 比 ( 宽 高 比 ) 与 图 像 
文件 固有 的 尺寸 匹配 。 


对 于 栅 格 图 像 来 说 ， 它 固有 的 尺寸 就 是 它 的 像素 尺寸 。 对 于 SVG 来 说 ， 则 更 为 复杂 。 如 
果 文 件 中 的 根 元 素 <svg> 带 有 明确 的 hetght 和 width 属性 ， 则 它们 会 被 用 作文 件 的 固有 尺 
寸 。 如 果 只 指定 hetght 或 者 width 而 不 是 两 个 都 指定 ， 并 且 <svg> 带 有 viewBox 属性 ， 屠 
么 将 用 viewBox 计算 袖 高 比 ， 图 像 也 会 被 缩放 以 匹配 指定 的 尺寸 。 如 果 <svg> 带 有 viewBox 
属性 而 没有 尺寸 ， 则 viewBox 的 hetght 和 width 将 被 视 为 像素 长 度 。 如 果 这 些 听 起 来 都 难 
以 理解 ， 别 担心 ， 我 们 会 在 3.3 节 适 当地 介绍 viewBox 属性 。 


如 果 <img> 元 素 和 <svg> 根 元 素 都 没有 任何 有 关 图 像 尺 寸 的 信息 ， 浏 览 器 应 该 为 蔡 入 内 容 
应 用 默认 HTML 尺寸 ， 通 常 是 150 像素 高 、300 像素 宽 ， 但 是 最 好 不 要 依赖 默认 尺寸 。 





































































































2.1.2 ”在 CSS 中 包含 SVG 


许多 CSS 样式 属性 都 接受 一 个 指向 图 像 文 件 的 URL 作为 属性 值 。 最 常用 的 便 是 
background-image 属性 ， 它 会 在 应 用 样式 的 元 素 的 文本 内 容 后 面 绘制 这 个 图 像 (或 者 多 个 
全 加 的 图 像 )。 


默认 情况 下 ， 背 景 图 像 会 按照 固有 尺寸 进行 绘制 ， 并 且 会 在 垂直 和 水 平 两 个 方向 上 重复 ， 
以 填 满 该 元 素 。SVG 文件 的 固有 尺寸 用 2.1.1 节 描 述 的 方式 确定 。 如 果 没 有 固有 尺寸 ， 
SVG 会 被 缩放 为 元 素 高 度 和 宽度 的 100%。 这 个 尺寸 可 以 使 用 background-size 属性 显示 
地 设置 ， 重 复 模式 和 图 像 位 置 可 以 使 用 background-repeat 和 background-position 设置 : 

















div.background-cat { 
background-image: url("cat.svg"); 
background-size: 100% 100%; 

} 


当 多 个 小 图 标 和 标识 使 用 栅 格 图 像 时 ， 通 常会 将 所 有 图 像 放 在 一 个 图 像 文件 
的 网 格 内 ， 然 后 使 用 background-size 和 background-position 为 每 个 元 素 
设置 对 应 的 图 像 。 这 样 ， 浏 览 器 只 需 下 载 一 个 图 像 文件 ， 从 而 可 使 网 页 显示 
得 更 快 。 这 种 组 合 图 像 文 件 被 称 为 CSS 精灵 ， 这 一 命名 寓意 着 神奇 的 精灵 让 
事情 变 得 更 简单 。 随 着 浏览 器 的 泻 染 性 能 越 来 越 高 ，SVG 文件 也 可 以 被 设计 
为 精灵 ， 但 是 我 们 应 该 尽量 避免 使 精灵 文件 太 大 。 

SVG 规范 还 定义 了 在 一 个 图 像 文 件 中 创建 多 个 图 标的 其 他 方式 ， 然 后 我 
们 可 以 使 用 URL 片段 指示 要 显示 哪个 图 标 。 理 想 情 况 下 ， 这 将 取代 基于 
background-position 属性 的 精灵 。 然 而 ， 正 如 前 面 提 到 的 ， 当 将 SVG 作为 
到 像 泻 染 时 有 些 浏览 器 会 忽略 URL 片段 ， 因 此 这 些 特性 目前 在 CSS 中 并 没 
有 太 大 的 用 途 。 
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除了 用 作 背 景 图 像 ， 在 CSS 中 SVG 文件 还 能 用 作 List-image (用 于 创建 装饰 性 项 目 列 表 ) 
或 者 border-image (用 于 创建 花哨 的 边框 )。 


2.2 将 SVG 作 为 应 用 程序 


要 将 外 部 SVG 文件 整合 到 HTML 页 面 中 ， 而 又 不 想 受 到 作为 图 像 钦 入 时 的 种 种 限制 的 话 ， 
可 以 使 用 租 入 对 象 。 


<object> 元 素 是 舱 入 外 部 文件 到 HTML (第 4 版 及 以 上 版 本 ) 以 及 XHTML 文档 中 一 种 通 
用 方式 。 它 可 以 用 于 磐 入 图 像 ， 类 似 于 <img>， 也 可 以 用 于 舱 入 独 离 的 HTML/XML 文档 ， 
类 似 于 <iframe>。 更 重要 的 是 ， 它 还 可 以 用 于 舱 入 任意 类 型 的 文件 ， 只 要 浏览 器 有 解析 该 
文件 类 型 的 应 用 程序 (浏览 器 插件 或 者 扩展 ) 即 可 。 使 用 <object> 黎 入 SVG， 可 以 让 那 
些 不 能 直接 显示 SVG 但 是 有 SVG 插件 的 老 版 本 浏览 器 用 户 也 能 查看 图 像 。 


<object> 元 素 的 type 属性 表示 要 租 入 的 文件 类 型 。 这 个 属性 应 该 是 一 个 有 效 的 网 络 媒体 
类 型 (通常 被 称 为 MIME 类 型 )。 对 于 SVG， 使 用 type="image/svg+txml"。 


浏览 器 使 用 文件 类 型 确定 如 何 (或 者 是 否 可 以 ) 显示 该 文件 ， 而 不 需要 首先 下 载 文 从 
件 的 位 置 通 过 data 属性 指定 。alt 和 title 属性 的 用 法 和 图 像 一 样 。 


object 元 素 必须 有 起 始 标签 和 结束 标签 。 这 两 个 标签 之 间 的 内 容 只 会 在 对 象 数据 本 身 不 能 
被 浑 染 时 显示 。 这 可 以 用 来 指定 在 浏览 器 无 法 显示 SVG 时 应 显示 的 备用 图 像 或 者 警告 广 
本 。! 下 面 的 代码 会 在 浏览 器 不 支持 SVG 时 显示 一 个 说 明文 本 和 一 个 栅 格 图 像 


<object data="cat.svg" type="image/svg+xml" 
title="Cat Object" alt="Stick Figure of a Cat"> 
<!-- 文本 或 者 栅 格 图 像 用 作 备用 选项 - -> 
<p>No SVG support! Here's a substitute:</p> 
<img src="cat.png" title="Cat Fallback" 
alt="A raster rendering of a Stick Figure of a Cat"/> 
</object> 
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<object> 与 <embed> 


引入 <object> 元 素 之 前 ， 有 些 浏览 器 使 用 非 标 准 的 <embed> 元 素来 达到 同样 的 目的 。 现 在 
<embed> 已 经 被 标准 采用 了 ， 因 此 如 果 需 要 支持 老 版 本 浏览 器 ， 可 以 使 用 <embed> 元 素 替 
代 <object> 元 素 。 为 了 更 广泛 的 支持 ， 可 将 <embed> 作为 <object> 标签 内 部 的 备用 内 容 。 
<embed> 和 <object> 之 间 有 两 个 重要 的 区 别 : 首先 ，<embed> 中 源 数 据 文件 使 用 src 而 
不 是 data 属性 指定 ; 其 次 ，<embed> 元 素 不 能 包含 任何 子 内 容 ， 因 此 如 果 襄 入 失败 惑 
没有 备用 选项 。 

虽然 规范 没有 采用 ， 但 是 在 大 多 数 浏览 器 中 <embed> 元 素 还 支持 可 选 的 pluginspage 属 
性 ， 用 于 指定 一 个 插件 安装 页 面 的 地 址 ， 供 之 前 没有 安装 过 的 用 户 下 载 安装 演 染 插件 。 











注 1: 除了 备用 内 容 ， 元 素 可 能 还 包含 定义 插件 参数 的 元 素 。 但 是 它们 并 不 用 于 SVG 泻 染 。 
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当 SVG 文件 作为 锅 入 对 象 引 入 时 (无 论 是 使 用 <object> 还 是 <embed>)，SVG 文件 的 泻 染 
方式 与 它 被 包含 在 <img> 元 素 中 时 大 致 相同 : 它 会 被 缩放 以 适 配 娱 入 元 素 的 宽 高 ， 并 且 不 
会 继承 定义 在 父 文档 中 的 任何 样式 。 

















然而 ， 与 图 像 不 同 的 是 ， 租 入 的 SVG 可 以 包含 外 部 文件 ， 同 时 脚本 可 以 在 该 对 象 和 父 页 
面 之 间 进 行 通信 ， 正 如 13.4.5 节 所 介绍 的 那样 。 


2.3 混合 文档 中 的 SVG 标记 
把 SVG 作为 图 像 和 应 用 程序 嵌入 Web 页 面 中 是 显示 一 个 单独 、 完 整 的 SVG 文件 的 两 各 广 
法 。 然 而 ， 我 们 也 可 以 在 一 个 文件 同时 包含 SVG 代码 与 HTML 或 者 XML 标记 。 
































将 标记 合并 到 一 个 文件 中 可 以 缩短 Web 页 面 的 加 载 时 间 ， 因 为 浏览 器 无 需 单独 下 载 图 像 文 
件 。 但 是 ， 如 果 同 一 图 像 用 于 站 点 中 的 多 个 页 面 ， 则 在 每 个 页 面 中 重复 出 现 的 SVG 标记 
会 增加 总 体积 和 下 载 时 间 。 


更 重要 的 是 ， 当 应 用 CSS 样式 和 使 用 脚本 时 ， 混 合 文档 内 的 所 有 元 素 会 被 视 为 一 个 文档 
对 象 。 



































2.3.1 SVG 中 的 foreign object 
混合 内 容 的 一 种 方式 是 在 SVG 内 插入 部 分 HTML (或 其 他 ) 内 容 。SVG 规范 定义 了 一 种 
在 图 像 指定 区 域 庙 入 这 种 “foreign” 内 容 的 方式 。 





<foreign0bject> 元 素 定 义 了 一 个 矩形 区 域 ，Web 浏览 器 (或 者 其 他 SVG 阅读 器 ) 应 该 
( 
前 





湛 癸 


其 中 绘制 子 XML 内 容 。 浏 览 器 负责 确定 如 何 绘制 内 容 。 子 内 容 通 常 是 XHTML (XM 
容 的 HIML) 代码 ,但 它 也 可 能 是 SVG 阅读 器 能 显示 的 任意 形式 的 XML。 内 容 类 型 通 
子 内 容 上 的 xmlns 属性 声明 的 XML 命名 空间 来 定义 。 


六 


和 矩形 绘制 区 域 通过 <foreign0bject> 元 素 的 x、y、width 和 height 属性 定义 ， 方式 类 似 于 
<use> 或 者 <image> 元 素 ， 我 们 将 在 第 5 章 中 详细 讲述 。 














矩形 区 域 基于 本 地 SVG 坐标 系统 求 值 ， 因 此 受 坐 标 系统 变换 (将 在 第 6 章 讨论 ) 和 其 他 
SVG 效果 影响 。 子 XML 文档 通常 泻 染 在 矩形 框 内 ， 其 结果 可 以 像 其 他 SVG 图 像 一 样 被 
操作 。 一 个 包含 XHTML 段落 的 SVG foreign object 效果 如 图 2-2 所 示 。 
















































































对 于 创建 混合 SYG/XHTML 文档 ，<foreign0bject> 元 素 极 具 潜 力 ,但 是 目前 未 得 到 很 好 
的 支持 。 正 〈 到 版 本 11 为 止 ) 根本 不 支持 它 ， 在 其 他 浏览 器 实现 中 也 还 存在 错误 和 不 一 
致 性 。 
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2-2: 包含 XHTML 文本 的 SVG 文件 截图 





如 果 想 定义 备用 内 容 ， 以 防 SVG 阅读 器 不 能 显示 foreign object 内 容 ， 可 以 结合 使 用 
requiredFeatures 属性 和 <switch> 元 素 ， 如 示例 2-1 所 示 。 在 支持 XHTML 和 foreign object 
的 浏览 器 中 ， 这 段 代码 的 效果 如 图 2-2 所 示 ;， 在 其 他 浏览 器 中 ， 它 只 显示 SVG 文本 。 














示例 2-1: 包含 <switch> 元 素 的 <foreign0bject> 元 素 


<g transform="skewX(20)"> 
<switch> 
<!-- 选择 一 个 子 元 素 --> 
<foreignObject x="1em" y="25%" width="10em" height="50%" 
requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"> 
<body xmlns="http://www.w3.0rg/1999/xhtml"> 
<p>This is an XHTML pragraph embedded within a SVG! 
So this text will wrap nicely around multiple lines, 
but it will still be skewed from the SVG transform. 
</p> 
</body> 
</foreignObject> 
<text x="1lem" y="25%" dy="1em"> 
This SVG text won't wrap, so it will get cut off... 
</text> 





</switch> 

</g> 
<switch> 元 素 会 告诉 SVG 陪读 器 只 有 在 元 素 的 requiredFeatures、requiredExtensions 以 
及 systemLanguage 属性 求 值 为 true 或 者 缺失 时 ， 才 绘制 第 一 个 直接 子 元 素 (以 及 所 有 子 
节点 )。9.7.2 节 会 讨论 使 用 systemLanguage 属性 在 不 同文 本 之 间 切 换 。 测 试 需要 使 用 的 特 
性 时 ， 使 用 规范 (http://www.w3.org/TR/SVG11/feature) 提供 的 URL 字符 串 之 一 即 可 ， 支 
持 <foreign0bject> 是 可 扩展 特性 的 一 部 分 。 

















不 幸 的 是 ， 并 没有 一 种 一 致 的 、 跨 浏览 器 的 方式 来 指定 哪 种 类 型 的 foreign 
object 是 必需 的 。 你 可 能 想 用 MathML 语言 来 为 图 表 展 示 公 式 ， 然 后 为 不 认 
识 MathML 的 浏览 器 指定 一 个 纯 文本 版 本 的 备用 。requiredExtensions 属性 
可 以 指示 需要 使 用 哪 种 类 型 的 foreigh object， 但 是 SVG1.1 规范 并 没有 明确 
地 描述 应 该 如 何 指定 扩展 一 一 只 是 说 它 应 该 是 一 个 URL。FireFox 使 用 XML 
命名 空间 URL， 但 是 其 他 浏览 器 不 是 。 
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2.3.2 ”在 XHTML 或 者 HTML5 中 内 联 SVG 


另 一 种 混合 SVG 和 XHTML 的 方式 是 在 XHTML 文档 中 包含 SVG 标记 ， 它 还 可 以 在 使 用 
HTMLS5 语法 的 非 XML 兼容 的 HTML 文档 中 使 用 。 这 种 在 Web 页 面 中 包含 SVG 的 方式 
称 为 内 联 SVG (Inline SVG)， 以 区 别 于 将 SVG 作为 图 像 或 者 对 象 圣 入 的 方式 ， 尽 管 它 实 
际 上 应 该 被 称 为 Infile SVG， 因 为 并 没有 要 求 SVG 代码 必须 出 现在 一 行 中 。 


2012 年 及 之 后 发 布 的 所 有 主流 桌面 Web 浏览 器 以 及 大 多 数 最 新 的 移动 浏览 器 都 支持 内 
联 SVG。 对 于 XHTML， 可 以 通过 在 SVG 命名 空间 内 定义 SVG 元 素来 表明 正在 切换 到 
SVG。 要 做 到 这 一 点 ， 最 简单 的 方式 就 是 在 顶级 <svg> 元 素 上 设置 xmlns="http://www. 
w3.org/2909/svg" ， 它 会 改变 该 元 素 以 及 其 所 有 子 节 点 的 默认 命名 空间 。 对 于 HTMLS5 文档 
(使 用 <!DOCTYPE html> 的 文件 )， 在 标记 中 可 以 跳 过 命名 空间 声明 。HTML 解析 器 会 自动 辨 
别 <svg> 元 素 和 它 的 子 节 点 都 在 SVG 命名 空间 内 ， 除 了 <foreign0bject> 元 素 的 子 元 素 。 


在 (X)HTML 文档 中 插入 SVG 标记 比 在 SVG 标记 中 插入 COHTML 文档 容易 ， 因 为 无 需 
单独 的 类 似 于 <foreign0bject> 的 元 素 定 义 在 哪里 泻 染 SVG。 相反， 可 以 给 <svg> 元 素 自 
身 应 用 定位 样式 ， 让 它 成 为 图 形 的 框架 。 


默认 情况 下 ， 定 位 SVG 时 采用 内 联 显示 模式 (这 意味 着 它 和 前 后 的 文本 会 被 插入 到 同一 
行 )， 并 且 其 尺寸 会 基于 <svg> 元 素 的 height 和 width 属性 决定 。 使 用 CSS 时 可 以 通过 设 
置 height 和 width CSS 属性 改变 尺寸 ， 使 用 display、margin、padding 和 许多 其 他 CSS 
定位 属性 改变 其 定位 。? 

示例 2-2 给 出 了 一 个 非常 简单 的 HTML5 文档 中 的 非常 简单 的 SVG 绘图 的 代码 。 其 结果 如 图 
2-3 所 示 。 对 于 HTML5，<svg> 元 素 上 的 xmlns 属性 是 可 选 的 。 对 于 XHTML 文档 ， 需 要 改 
变 文件 顶部 的 DOCTYPE 声明 ， 以 及 使 用 <![CDATA[...]]> 块 包 庄 <style> 元 素 内 的 CSS 代码 。 




































































示例 2-2: HIML 文件 中 的 内 联 SVG 
<!DOCTYPE htmL> 
<htmL> 
<head> 
<title>SVG in HTML</title> 
<style> 


svg{ 

display: block; O@ 

width: 500px; 

height: 500px; 

margin: auto; 

border: thick double navy; © 

background-color: lightblue; 
} 





注 2: CSS 定位 属性 应 用 于 顶级 元 素 ， 也 就 是 HTML 元 素 的 直接 子 元 素 。 为 另 一 个 SVG 元 素 的 子 元 素 时 ， 
它 会 基于 嵌 套 SVG 规则 进行 定位 ， 正 如 第 3 章 所 述 。 
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body { 
font-family: cursive; © 
} 
circle { 
fill: lavender; @ 
stroke: navy; 
strike-width: 5; 
} 


</style> 
</head> 
<body> 
<hi>Inline SVG in HTML Demo Page</hi> 
<svg ViewBox="0 0 250 250" 
xmlns="http://www.w3.org/2000/svg"> 
<title>An SVG circle</title> 
<circle cx="125" cy="125" r="100"/> 
<text x="125" y="125" dy="0.5em" text-anchor="middle"> 
Look Ma, Same Font!</text> 
</svg> 
<p>And here is regular HTML again...</p> 
</body> 
</htmL> 


@ 第 一 个 样式 规则 定义 了 SVG 应 该 如 何 放置 以 及 在 HTML 文档 内 的 尺寸 。 
加 也 可 以 使 用 其 他 CSS 属性 为 要 绘制 的 SVG 盒子 指定 样式 。 

@ 定义 给 主 文档 的 样式 会 被 SVG 继承 。 

@ 也 可 以 在 主 样式 表 内 为 SVG 元 素 定 义 样式 。 





Inline SVG in HTML Demo Page 


Look Ma, Same Font! 








And here is regular HTML again... 








图 2-3: 示例 2-2 的 结果 
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2.3.3 ”其 他 XML 应 用 程序 中 的 SVG 

XML 命名 空间 除了 可 以 用 于 XHTML 以外， 也 可 用 于 在 其 他 XML 文档 中 标识 SVG。 具 
体 的 细节 依赖 于 主 XML 文档 的 语法 ,但 是 有 两 个 基本 要 求 : XML 文档 必须 为 SVG 元 素 
明确 定义 一 个 布局 盒子 ， 并 且 用 于 显示 这 个 文档 的 程序 必须 知道 如 何 绘制 SVG。 











一 种 经 常 内 联 SVG 的 XML 文档 类 型 是 可 扩展 样式 表 语 言 格式 化 对 象 (Extensible 
Stylesheet Language Formatting Object，XSL-FO) 文件 。 一 个 XSL-FO 文件 定义 了 一 个 多 
页 文档 的 内 容 和 布局 ， 可 以 用 于 发 布 或 者 创建 一 个 PDF 文件 。XSL-FO 数据 类 型 定义 包含 
一 个 <instream-foreign-object> 元 素 ， 它 类 似 于 SVG 的 <foreign0bject> 元 素 ， 定 义 一 
个 矩形 区 域 来 容纳 来 自 不 同 命名 空间 的 内 容 。 我 们 可 以 在 里 面 添加 SVG 标记 。 只 需 确 保 
<svg> 标签 以 及 其 所 有 子 元 素 都 定义 在 SVG 命名 空间 内 ， 为 此 需要 为 所 有 SVG 元 素 启 用 
命名 空间 前 级 ， 或 者 使 用 xmtns 属性 改变 默认 命名 空间 。 


示例 2-3 给 出 了 一 个 XSL-FO 文件 的 代码 片段 ， 为 格式 化 对 象 元 素 使 用 了 自 定义 的 fo 命名 
空间 前 级 。SVG 命名 空间 被 设置 为 <svg> 及 其 子 元 素 的 默认 命名 空间 ， 因 此 在 图 像 标 记 内 
无 需 使 用 前 级 。 



































示例 2-3: XSL-FO 文档 内 的 SVG 


<?xml version="1.0" encoding="UTF-8"?> 
<fo:root xmlns.:fo="http://www.w3.0rg/1999/XSL/Format"> 
<!-- 其 他 格式 化 对 象 内 容 - -> 
<fo:instream-foreign-object width="140px" height="140px"> 
<svg xmlns="http://www.w3.org/2000/svg" 
width="140px" height="140px"> 
<!-- 在 此 输入 SVG 代码 --> 
</svg> 
</fo:instream-foreign-object> 
<!-- 文档 的 其 他 内 容 - -> 


</fo:root> 
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SVG 的 世界 就 是 一 张 无 限 大 的 画布 。 在 本 章 中 ， 我 们 将 了 解 到 如 何 使 阅读 器 知道 在 这 张 画 
布 中 应 该 显示 哪 一 部 分 区 域 ， 如 果 确 定 它 的 尺寸 ， 以 及 如 何在 该 区 域内 确定 点 的 位 置 。 























3.1 视 口 

文档 打算 使 用 的 画布 区 域 称 作 视 口 。 我 们 可 以 在 <svg> 元 素 上 使 用 width 和 height 属性 确 
定 视 口 的 大 小 。 属 性 的 值 可 以 是 一 个 数字 ， 该 数字 会 被 当 作用 户 坐 标 下 的 像素 。 也 可 以 指 
定 width 和 height 为 带 有 单位 的 数字 ， 单 位 的 取 值 是 下 列 值 之 一 。 
































。 em 
默认 字体 的 大 小 ， 通 常 相当 于 文本 行 高 。 
。 ex 


字母 x 的 高 度 。 


四 PX 


像素 (在 支持 CSS2 的 图 形 系统 中 ， 每 英寸 为 96 像素 ) 。 





. pt 
点 (1/72 英寸 )。 


。 pc 


12 点 (1/6 英寸 )。 
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英寸 。 
以 下 是 几 种 合法 的 SVG 视 口 声明 形式 : 


<svg width="200" height="150"> 
<svg width="200px" height="150px"> 


这 两 个 声明 都 指定 了 一 个 200 像素 宽 、150 像素 高 的 区 域 。 





<svg width="2cm" height="3cm"> 
这 个 声明 指定 了 一 个 2 厘米 宽 、3 厘米 高 的 区 域 。 
<svg width="2cm" height="36pt"> 


混用 单位 是 可 行 的 ， 但 是 并 不 常用 。 这 个 元 素 指定 了 一 个 2 厘米 宽 、36 点 高 的 区 域 。 





还 可 以 指定 <svg> 元 素 的 width 和 height 为 百分比 。 当 元 素 艇 和 套 在 另 一 个 <svg> 元 素 里 
时 ， 甚 百分比 根据 外 层 包 衷 元 素 进 行 计 算 。 如 果 <svg> 元 素 为 根 元 素 ， 其 百分比 根据 窗口 
尺寸 计算 。3.5 市 会 展示 舱 套 <svg> 元 素 的 情况 。 


3.2 ”使 用 默认 用 户 坐标 


阅读 器 设置 了 一 个 坐标 系统 ， 其 中 水 平 坐标 (x 坐标 ) 向 右 递 增 ， 垂直 坐标 (y 坐标 ) 垂直 
向 下 递增 。 定 义 视 口 的 左上 角 x 坐标 和 ? 坐标 均 为 0。 这 个 点 写作 (0.0)， 也 被 称 作 原点 。 
这 个 坐标 系统 是 一 个 纯粹 的 几何 系统 ， 点 没有 宽度 和 高 度 ， 其 网 格 线 也 被 认为 是 无 限 细 
的 。 关 于 这 一 主题 的 更 多 信息 可 以 参见 第 4 章 。 








示例 3-1 建立 了 一 个 200 像素 宽 、200 像素 高 的 视 口 ， 然 后 绘制 了 一 个 矩形 ， 它 的 左上 角 
在 坐标 (10,10) 位 置 , 宽 为 50 像素 , 高 为 30 像素 。? 图 3-1 展示 了 其 结果 ，, 并 且 使 用 标尺 和 
网 格 展示 了 坐标 系统 。 








注 1: 本 书 中 ， 坐 标 被 指定 为 括号 内 的 数字 对 ， 其 中 第 一 个 为 x 坐 标 。 因 此 ，(10, 30) 表示 x 坐标 为 10, y 坐 
标 为 30。 

注 2: 为 了 节省 空间 ， 我 们 省 略 了 <?xmtL ...?> 和 <!DOCTYPE ...> 行 。 这 些 内 容 在 每 个 图 形 中 都 是 一 成 不 变 
的 ， 因 此 忽略 它们 。 
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示例 3-1: 使 用 默认 的 坐标 


http://oreillymedia.github.io/sve-essentials-examples/ch03/default_coordinates.html 


<svg width="200" height="200"> 
<rect x="10" y="10" width="50" height="30" 
style="stroke: black; fill: none;"/> 
</svg> 





PX 0 20 40 50 30 100 
0 


下 由 


Do 











3-1: 使 用 默认 坐标 的 矩形 


即使 视 口 中 没有 指定 单位 ， 也 可 以 在 某 些 SVG 形状 元 素 中 指定 单位 ， 如 示例 3-2 所 示 。 
3-2 展示 了 其 结果 ， 并 使 用 标尺 和 网 格 展示 了 坐标 系统 。 





| 














示例 3-2: 明确 指定 单位 
http://oreillymedia.github.io/sveg-essentials-examples/ch03/explicit units.html 
<svg width="200" height="200"> 


<rect x="10mm" y="10mm" width="15mm" height="10mm" 
style="stroke: black; fill: none;"/> 





</svg> 
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图 3-2: 使 用 明确 指定 单位 的 矩形 

在 <svg> 元 素 中 指定 单位 并 不 会 影响 其 他 元 素 中 没有 给 定单 位 的 坐标 。 示 例 3-3 展示 了 
一 个 以 毫米 为 单位 进行 设置 的 视 口 ， 而 矩形 仍然 使 用 像素 (用户) 坐标 绘制 ， 正 如 图 3-3 
所 示 。 
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示例 3-3: <svg> 元 素 上 的 单位 


http://oreillymedia.github.io/sve-essentials-examples/ch03/units_on_svg.html 


<svg width="70mm" height="70mm"> 
<rect x="10" y="10" width="50" height="30" 
style="fill:none; stroke:black;"/> 
</svg> 
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3-3: 指定 单位 的 视 口 和 没有 指定 单位 的 矩形 


多 M3 已 M3 J 
3.3 为 视 口 指定 用 户 坐 标 
到 目前 为 止 的 示例 中 ,没有 单位 的 数值 都 被 视 为 像素 。 有 了 时候 这 并 不 是 我 们 想 要 的 。 比 
如 ， 你 可 能 想 要 设置 一 个 坐标 系统 ， 其 中 每 个 用 户 坐 标 表示 1/16 厘米 (这 并 不 是 一 个 好 的 
设计 ， 我 们 这 么 用 只 是 为 了 证 明确 实 可 行 )。 在 这 个 系统 中 ， 一 个 边 长 为 40 单位 的 方块 显 
示 的 边 长 为 2.5 厘米 。 


为 了 实现 这 一 效果 ， 我 们 将 在 <svg> 元 素 上 设置 viewBox 属性 。 这 个 属性 的 值 由 4 个 数值 
组 成 ， 它 们 分 别 代表 想 要 鳃 加 在 视 口 上 的 用 户 坐 标 系 统 的 最 小 x 坐标 、 最 小 y 坐标 、 宽 度 























因此 ， 要 在 4 厘米 x5 厘米 的 图 纸 上 设 置 一 个 每 厘米 16 个 单位 的 坐标 系统 ， 要 使 用 这 个 
开始 标记 : 














<svg width="4cm" height="5cm" viewBox="0 0 64 80"> 





示例 3-4 给 出 了 一 个 房子 图 像 的 SVG， 并 且 使 用 新 的 坐标 系统 显示 。 图 3-4 展示 了 结果 。 
其 中 网 格 和 次 色 的 数值 展示 了 新 的 用 户 坐 标 系统 ， 浅 色 的 数值 之 间 间 隔 1 厘米 。 











示例 3-4: 使 用 viewBox 
http://oreillymedia.github.io/sveg-essentials-examples/ch03/using_viewbox.html 


<svg width="4cm" height="5cm" viewBox="0 0 64 80"> 





<rect x="10" y="35" width="40" height="40" 
style="stroke: black; fill: none;"/> 
!-- 房 项 --> 

<polyline points="10 35, 30 7.68, 50 35" 
style="stroke: black; fill: none;"/> 
1 i -> 

<polyline points="30 75, 30 55, 40 55, 40 75" 
style="stroke: black; fill: none;"/> 

</svg> 
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3-4: 新 的 用 户 坐标 系统 


为 viewBox 属性 指定 的 数值 可 以 使 用 逗号 或 空格 分 隔 。 如 末 宽 度 或 者 高 度 为 0， 则 没有 图 
形 显示 。 宽 度 和 高 度 要 求 大 于 等 于 0， 为 它们 指定 负 值 是 错误 的 。 





仔细 阅读 示例 3-4 的 代码 ， 你 会 广 意 到 ， 为 了 让 房 顶 的 位 置 更 精确 ， 我 们 使 
用 了 十 进 制 的 小 数 来 表示 它 。 在 SVG 中 几乎 所 有 的 数字 都 是 十 进 制 浮 点 数 。 
SVG 阅读 器 程序 需要 支持 至 少 32 位 精度 的 数字 ， 并 且 对 于 某 些 计算 鼓励 使 
用 更 高 精度 的 数字 。 实 际 上 ， 我 们 甚至 可 以 在 坐标 系统 中 使 用 科学 计数 法 来 
表示 非常 大 或 者 非常 小 的 数字 ， 因 此 点 30,7.68 还 可 以 写作 3.0E+1,7.68e0。 
但 为 了 可 读 性 和 简洁 性 ， 并 不 推荐 采用 这 种 形式 一 一 仅 在 必要 时 再 采用 吧 。 
































3.4 保留 宽 高 比 

在 前 面 的 例子 中 ， 视 口 和 viewBox 的 宽 高 比 是 相同 的 (4/5 = 64/80) 。 但 是 ， 如 果 视 口 的 宽 
高 比 和 viewBox 不 一 样 ， 会 发 生 什 么 情况 ? 如同 在 这 个 示例 中 ，viewBox 的 宽 高 比 为 1:1 
(宽度 和 高 度 相 同 ) ， 但 是 视 口 的 宽 高 比 为 1 : 3 (高 度 是 宽度 的 3 倍 )。 




















<svg width="45px" height="135px" viewBox="0 0 90 90"> 
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在 这 种 情况 下 ，SVG 可 以 做 三 件 事 。 


。 按 较 小 的 尺寸 等 比例 缩放 图 形 ， 以 使 图 形 完全 填充 视 口 。 在 这 个 例子 中 ， 图 片 将 变 为 原 
始 宽 高 的 一 半 。 在 3.4.2 节 会 看 到 相关 的 例子 。 

。 按 较 大 的 尺寸 等 比例 缩放 图 形 并 裁剪 掉 超 出 视 口 的 部 分 。 在 这 个 例子 中 ， 图 片 会 变 成 原 
始 宽 高 的 1.5 倍 。 在 3.4.3 节 会 看 到 相关 的 例子 。 

。 拉 伸 和 挤 压 绘 图 以 使 其 恰好 填充 新 的 视 口 〈 也 就 是 说 ， 完 全 不 保留 宽 高 比 ) 。 在 3.4.4 节 
可 查看 详情 。 

在 第 一 种 情况 下 ， 由 于 图 片 在 某 一 方向 比 视 口 小 ， 所 以 我 们 必须 指定 将 图 片 放置 在 哪里 。 


在 这 个 例子 中 ， 图 片 的 宽 高 会 被 统一 缩放 为 45 像素 。 缩 小 后 图 形 的 宽度 完美 适 配 视 口 的 
宽度 ， 但 你 必须 决定 图 片 是 显示 在 135 像素 高 的 视 口 的 顶部 〈 顶 部 对 齐 )、 中 间 还 是 底部 。 

















sy 















































在 第 二 种 情况 下 ， 由 于 图 片 在 某 一 方向 比 视 口 大 ， 我 们 必须 指定 哪个 区 域 被 剪 切 掉 。 在 这 
个 例子 中 ， 图 片 的 宽 高 会 被 统一 缩放 为 135 像素 。 至 此 ， 图 片 的 高 度 非常 适合 视 口 ， 但 你 
必须 决定 是 切 掉 图 片 的 右 侧 、 左 侧 还 是 两 人 出 ， 以 适 配 45 像素 宽 的 视 口 。 





3.4.1 为 preserveAspectRatio 指 定 对 齐 方 式 
preserveAspectRatio 属性 允许 我 们 指定 被 缩放 的 图 像 相 对 视 口 的 对 齐 方式 ， 以 及 是 希望 它 
适 配 边缘 还 是 要 裁剪 。 这 一 属性 的 模型 为 : 








preserveAspectRatio="alignment [meet | slice]" 
其 中 alignment 指定 轴 和 位 置 ， 可 选 值 为 表 3-1 中 的 组 合 值 之 一 。 对 齐 说 明 符 由 一 个 x 对 


齐 方 式 的 值 和 一 个 y 对 齐 方式 的 值 (min、mid 或 者 max) 组 合 而 成 。preserveAspectRatio 
的 默认 值 为 xMidYMid meet。 





y 对齐 方式 由 大 写字 母 开 始 ， 因 为 x 对 齐 方式 和 对齐 方式 被 连接 成 为 一 个 
单词 。 




















表 3-1: preseveAspectRatio 对 亨 方 式 的 可 选 值 

y 对 齐 Xx 对齐 
xMin xMid xMax 
按 视 口 左 侧 边 缘 ， 按 视 口水 平 中 心 ， 按 视 口 右 侧 边缘 ， 
viewBox 最 小 x 值 对 齐 ”viewBox 中 点 x 值 对 齐 ”viewBox 最 大 x 值 对 齐 





yMin 
按 视 口 顶部 边缘 ， viewBox 最 小 y 值 xMinYMin xMidYMin xMaxYMin 
对 齐 








J 对 齐 Xx 对 齐 





yMid 
按 视 口 垂直 中 心 ，viewBox 中 点 y 值 xMinYMid 
对 齐 
yMax 
按 视 口 底部 边缘 ，viewBox 最 大 y 值 XxMinYMax 
对 齐 


xMidYMid xMaxYMid 


xMidYMax xMaxYMax 





因此 ， 如 果 想 要 viewBox="0 0 99 96" 内 的 图 片 完 全 适 配 宽 为 45 像素 、 高 为 135 像素 的 视 
口 ， 并 且 与 视 口 顶 部 对 齐 ， 要 编写 如 下 所 示 代 码 : 











<svg width="45px" height="135px" viewBox="0 0 90 90" 
preserveAspectRatio="xMinYMin meet"> 


在 这 种 情况 下 ， 由 于 宽度 正好 适 配 ， 因 此 x 对齐 方 式 并 不 重要 ， 你 也 可 以 
使 用 xMidYMin 或 者 xMaxYMin。 
preserveAspectRatio。 比 如 ， 你 可 能 希望 缩放 图 像 以 适 配 应 用 程序 窗口 ， 
或 者 可 能 使 用 父 文档 的 CSS 设置 高 度 和 宽度 。 在 这 些 情况 下 ， 你 需要 考虑 视 



























































然而 ， 通 常 在 不 知道 视 口 宽 高 比 时 才 会 使 用 











口 太 宽 或 者 太 高 时 如 何 显示 图 像 。 
如 果 没 有 指定 preserveAspectRatio， 其 默认 值 为 xMidYMid meet， 会 缩小 图 像 以 适 配 可 





用 的 空间 ， 并 且 使 它 水 平和 垂直 居中 。 








这 些 内 容 都 很 抽象 ， 下 面 给 出 一 些 具体 例子 ， 展 示 组 合 对 齐 方式 与 meet 和 stice 如 何 交 互 。 











3.4.2 ”使 用 meet 说 明 符 


示例 3-5 中 的 <svg> 开始 标记 都 使 用 了 meet 说 明 符 。 





示例 3-5: 使 用 meet 说 明 符 


<!-- 高 视 口 --> 


<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 90 90" 


width="45" height="135"> 


<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 90 90" 


width="45" height="135"> 


<svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 90 90" 


width="45" height="135"> 


<!-- 宽 视 口 --> 


<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 90 90" 


width="135" height="45"> 
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<svg preserveAspectRatio="xMidYMid meet" ViewBox="0 0 90 90" 
width="135" height="45"> 


<svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 90 90" 
width="135" height="45"> 


图 3-5 展示 了 缩小 的 图 像 适 配 闭 合 viewBox 的 情况 。 
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3-5: meet 一 viewBox 适 配 视 口 


3.4.3 ”使 用 slice 说 明 符 


图 3-6 展示 了 使 用 slice 说 明 符 裁剪 图 像 不 适合 视 口 的 部 分 。 它 们 都 是 用 示例 3-6 中 的 
<svg> 标签 创建 的 。 























XMiny XMid* XMax* 














3-6: slice 一 一 图 像 填 充 视 口 


示例 3-6: 使 用 slice 说 明 符 
<!-- 高 视 口 --> 
<svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 90 90" 
width="45" height="135"> 





<svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 90 90" 
width="45" height="135"> 


<svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 90 90" 
width="45" height="135"> 








<!-- 宽 视 口 -> 
<svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 90 90" 
width="135" height="45"> 


<svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 90 90" 
width="135" height="45"> 


<svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 90 90" 
width="135" height="45"> 


这 一 节 的 在 线 示例 允许 你 尝试 不 同 的 preserveAspectRatio 选项 ， 根 据 任意 大 小 的 SVG 前 
切 、 缩 放 和 移动 猫 





http://oreillymedia.github.io/svg-essentials-examples/ch03/meet_slice_specifier.html 


3.4.4 ”使 用 none 说 明 符 

最 后 ， 还 有 第 三 个 选项 用 于 在 viewBox 和 视 口 的 宽 高 比 不 同时 缩放 图 像 。 如 果 指 定 
preserveAspectRatio="none"， 那 么 图 像 不 会 被 等 比例 缩放 ， 以 使 它 的 用 户 坐 标 适 合 视 口 。 
图 3-7 展示 了 使 用 示例 3-7 中 的 <svg> 标签 生成 的 “哈哈 镜 ” 效 果 。 














示例 3-7: 不 保留 宽 高 比 


<!-- 高 视 口 -> 
<svg preserveAspectRatio="none" ViewBox="0 0 90 90" 
width="45" height="135"> 


<!-- 宽 视 口 --> 
<svg preserveAspectRatio="none" viewBox="0 0 90 90" 
width="135" height="45"> 
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3-7: 不 保留 宽 高 比 


3.5 ” 翌 套 坐标 系统 

我 们 可 以 在 任何 时 候 将 另 一 个 <svg> 元 素 插入 到 文档 中 来 建立 新 的 视 口 和 坐标 系统 。 其 效 
果 是 创建 一 个 稍 后 可 以 绘制 图 形 的 “迷你 画布 "。 图 3-5 就 是 使 用 这 一 技术 实现 的 。 我 们 
并 没有 逐一 绘制 矩形 ， 然 后 调整 和 定位 每 一 个 矩形 里 的 猫 〈 暴 力 的 方法 ) ， 而 是 采用 如 下 


























坐标 系统 | 29 


。 在 主 画 布 上 绘制 蓝 色 的 矩形 。 
。 为 每 个 矩形 定义 一 个 带 有 对 应 preserveAspectRatio 属性 的 新 <svg> 元 素 。 
。 在 新 画布 上 绘制 猫 (使 用 <use>)， 并 让 SVG 做 其 他 工作 。 























这 里 有 一 个 简化 的 例子 ， 在 主 画 布 上 展示 一 个 圆 ， 然 后 在 主 画 布 上 的 新 画布 《轮廓 为 一 个 
蓝 色 矩形 ) 内 还 展示 了 一 个 圆 。 图 3-8 便 是 期 望 的 结果 。 


图 3-8: 庶 套 的 视 口 


首先 ， 为 主 坐标 系统 生成 SVG 和 圆 (注意 ， 其 用 户 坐 标 与 这 个 文档 中 的 视 口 正好 重合 )。 





























<svg width="200px" height="200px" viewBox="0 0 200 200"> 
<circle cxX="25" cy="25" r="25" style="stroke: black; fill: none;"/> 
</svg> 





结果 如 图 3-9 所 示 。 























图 3-9; 主 视 口中 的 贺 


现在 ， 绘 制 盒子 的 边界 来 显示 新 视 口 的 位 置 : 








<svg width="200px" height="200px" viewBox="0 0 200 200"> 
<circle cx="25" cy="25" r="25" style="stroke: black; fill: none;"/> 
<rect x="100" y="5" width="30" height="80" 
style="stroke: blue; fill: none;"/> 
</svg> 

















这 就 产生 了 如 图 3-10 所 示 的 效果 。 








() 











3-10: 主 视 口中 的 圆 和 边界 盒子 


现在 ， 我 们 来 为 新 视 口 添加 另 一 个 <svg> 元素 。 除 了 指定 viewBox、width、height 和 
preserveAspectRatio 规格 ， 还 可 以 在 闭合 的 <svg> 元 素 上 指定 x 和 y 属性， 建立 新 视 口 
(如 果 没 有 给 x 和 y 指定 值 ， 则 假定 为 0)。 














<svg width="200px" height="200px" viewBox="0 0 200 200"> 
<circle cx="25" cy="25" r="25" style="stroke: black; fill: none;"/> 
<rect x="100" y="5" width="30" height="80Q" 
style="stroke: blue; fill: none;"/> 


<svg x="100px" y="5px" width="30px" height="80px" 
viewBox="0 0 50 50" preserveAspectRatio="xMaxYMax meet"> 
</svg> 
</svg> 


使 用 艇 套 的 <svg> 元 素 设置 新 的 坐标 系统 并 不 会 改变 视觉 显示 ， 但 它 允 许 我 们 在 该 新 系统 
中 添加 圆 ， 生 成 的 结果 如 图 3-8 所 示 。 




















<svg width="200px" height="200px" viewBox="0 0 200 200"> 
<circle cxX="25" cy="25" r="25" style="stroke: black; fill: none;"/> 
<rect x="100" y="5" width="30" height="80" style="stroke: blue; 
fill: none;"/> 


<svg X="100px" y="5px" width="30px" height="80px" viewBox="0 0 50 50" 
preserveAspectRatio="xMaxYMax meet"> 
<circle cx="25" cy="25" r="25" style="stroke: black; 
fill: none;"/> 
</svg> 
</svg> 


如 果 你 尝试 为 一 个 <svg> 的 preserveAspectRatio 属性 使 用 meet 或 者 slice 
值 ， 而 这 个 <svg> 般 套 在 另 一 个 具有 preserveAspectRatio="none" 属性 的 
<svg> 元 素 内 ， 其 结果 可 能 会 让 你 大 吃 一 惊 。 骨 套 元 素 的 视 口 的 宽 高 比 ， 将 
按照 父 SVG 被 压缩 或 者 拉 伸 的 坐标 来 求 值 以 适 配 视 口 ， 这 可 能 导致 图 像 被 
挤 压 和 裁剪 或 者 缩放 。 











坐标 系统 | 31 


第 4 章 


基本 形状 











一 旦 在 <svg> 标签 中 建立 起 坐标 系统 ， 就 可 以 开始 画图 了 。 本 章 将 介绍 用 来 创建 大 部 分 绘 
图 中 主要 元 素 的 基本 形状 : 线段 、 和 矩形 、 多 边 形 、 贺 和 椭圆 。 


4.1 线段 


SVG 可 以 使 用 <Line> 元 素 画 出 一 条 直线 段 。 使 用 时 只 需要 指定 线段 起 止 点 的 x 和 y 坐标 
即 可 。 指 定 坐 标 时 可 以 不 带 单位 ， 此 时 会 使 用 用 户 坐 标 ， 也 可 以 带 上 单位 ， 如 em、iin 等 
(3.1 市 介绍 过 )。 

















<line x1="start-x" yl="start-y" 
Xx2="end-x" y2="end-y" /> 


示例 4-1 中 的 SVG 画 了 好 几 条 线段 ， 图 4-1 中 的 坐标 格子 不 是 SVG 图 形 的 组 成 部 分 。 





示例 4-1: 线段 
http://oreillymedia.github.io/sveg-essentials-examples/ch04/basic-lines.html 


<svg width="200px" height="200px" viewBox="0 0 200 200" 
xmlns="http://www.w3.0rg/2000/svg"> 


<!-- 水 平 线段 --> 
<Line x1="40" y1="20" x2="80" y2="20" style="stroke: black;" /> 
<!-- 垂直 线段 --> 





<line x1="0.7cm" yl="1cm" x2="0.7cm" y2="2.0cm" 
style="stroke: black;" /> 


<!-- 对 角 线 段 - -> 
<line x1="30" y1="30" x2="85" y2="85" style="stroke: black;" /> 
</svg> 
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图 4-1: 线段 


4.2 ”笔画 特性 
线段 可 以 看 作 在 画布 上 画 出 来 的 笔画 。 笔 画 的 尺寸 、 颜 色 和 风格 都 会 影响 线段 的 表现 。 这 
些 特 性 都 可 以 在 style 属性 中 指定 。 








4.2.1 stroke-width 


第 3 章 提 到 过 ， 画 布 中 的 坐标 网 格 线 是 无 穷 细 的 ， 那 么 ， 线 段 或 笔画 的 位 置 与 网 格 线 的 位 
置 是 什么 关系 呢 ? 答案 是 网 格 线 位 于 笔画 的 正中 间 。 示 例 4-2 中 画 了 几 条 线段 ， 为 了 看 得 
更 清晰 ， 将 笔画 宽度 设 为 10 (用 户 坐 标 )。 图 4-2 中 画 出 了 坐标 格子 的 线 ， 以 便 你 看 得 更 


VE 
清楚 。 


























示例 4-2: 演示 stroke-width 
http://oreillymedia.github.io/sve-essentials-examples/ch04/stroke-width.html 


<svg width="200px" height="200px" viewBox="0 0 200 200" 
xmlns="http://www.w3.o0rg/2000/svg"> 
<!1-- 水 平 线段 --> 
<line x1="30" y1="10" x2="80" y2="10" 
style="stroke-width: 10; stroke: black;" /> 
<!-- 垂直 线段 --> 
<line x1="10" y1="30" x2="20" y2="80" 
style="stroke-width: 10; stroke: black;" /> 
<!-- 对 角 线段 --> 
<Line x1="25" y1="25" x2="75" y2="75" 
style="stroke-width: 10; stroke: black;" /> 
</svg> 











px 0 20 40 60 80 100 

















4-2: 演示 stroke-width 
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4. 

















SVG 的 坐标 网 格 线 可 能 是 无 穷 细 的 ， 但 是 你 的 电脑 屏幕 却 是 由 固定 大 小 的 像 
素 组 成 的 。 对 角 线 的 边缘 看 起 来 会 很 毛 躁 ， 这 是 因为 电脑 屏幕 在 显示 的 时 候 
通过 计算 将 它 放 到 了 最 邻近 的 像素 块 中 ， 这 就 是 所 谓 的 锯齿 (aliasing)。 电 
脑 也 可 以 使 用 反 锯齿 (anti-aliasing) 技术 来 使 边缘 看 起 来 更 柔和 ， 有 具体 做 法 
是 对 那些 斜 线 只 经 过 了 一 部 分 的 像素 点 进行 模糊 处 理 。 















































大 部 分 SVG 阅读 器 都 会 默认 开启 反 锯齿 功能 ， 这 会 使 得 1 像素 的 黑 线 有 
时 候 看 起 来 看 2 像素 的 灰 线 ， 因 为 它 位 于 屏幕 上 两 个 像素 的 正中 间 。 你 
可 以 通过 指定 CSS 属性 shape-rendering 的 值 来 控制 反 锯齿 特性 。 取 值 
crispEdges (在 元 素 上 ， 或 者 在 整个 SVG 上 ) 会 关闭 反 锯齿 特性 ， 得 到 清 
晰 的 图 像 (有 时候 看 起 来 很 毛 躁 )。 取 值 geometricPrecision 则 会 使 边缘 圆 
滑 (有 时 候 看 起 来 很 模糊 )。 


























2.2 笔画 颜色 


你 可 以 通过 以 下 几 种 方式 指定 笔画 颜色 。 


基本 的 颜色 关键 字 : aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、 
olive、purple、red、silver、teal、white 和 yellow。 也 可 以 使 用 SVG 规范 第 4.2 节 
中 规定 的 颜色 关键 字 (http://www.w3.org/TR/SVG/types.html#ColorKeywords) 。 

由 6 位 十 六 进 制 数 字 指 定 的 颜色 ， 形 式 为 #rrggbb， 其 中 rr 表示 红色 ，99 表示 绿色 ， 
bb 表示 蓝 色 ， 它 们 的 范围 都 是 99-ff。 

由 3 位 十 六 进 制 数字 指定 的 颜色 ， 形 式 为 #rgb， 其 中 r 表示 红色 ，g 表示 绿色 ，b 表示 
蓝 色 ， 它 们 的 范围 都 是 9-f。 这 是 前 一 种 方式 的 简写 ， 与 之 等 效 的 6 位 数字 写法 是 将 每 
位 重复 一 次 ， 也 就 是 #d6e 与 #dd66ee 是 一 样 的 。 

通过 rgb(red-value，green-value，blue-value) 形式 指定 的 rgb 颜色 值 ， 每 个 值 的 取 值 
范围 是 整数 0-255 或 者 百分比 0%-100%。 

currentColor 关键 字 ， 表 示 当 前 元 素 应 用 的 CSS 属性 color 的 值 。color 是 用 来 给 
HTML 的 文本 设置 颜色 的 ， 会 被 子 元 素 继承 ， 但 对 SVG 没有 直接 效果 。 如 果 使 用 内 联 
SVG 图 标的 话 ( 见 2.3.2 节 )， 使 用 currentColor 可 以 让 图 标 使 用 它 周围 文本 的 颜色 。 



































示例 4-3 使 用 了 上 面 介绍 的 各 种 方法 (除了 currentColor) 指定 颜色 ， 结 果 见 图 4-3。 


示例 4-3: 笔画 颜色 
http://oreillymedia.github.io/sve-essentials-examples/ch04/stroke-color.html 














<svg width="200px" height="200px" viewBox="0 0 200 200" 
xmlns="http://www.w3.0rg/2000/svg"> 
<!-- 红色 --> 
<Line x1="10" y1="10" x2="50" y2="10" 
style="stroke: red; stroke-width: 5;"/> 








!-- 淡 绿色 --> 


<line x1="10" y1="20" x2="50" y2="20" 
style="stroke: #9f9; stroke-width: 5;"/> 


!-- 淡 蓝 色 --> 


<Line x1="10" y1="30" x2="50" y2="30" 


style="stroke: #9999ff 


<!-- 桶 色 --> 


; Stroke-width: 5;"/> 


<line x1="10" y1="40" x2="50" y2="40" 


style="stroke: rgb(255 


<!-- 深 紫色 -> 


，128, 64); stroke-width: 5;"/> 


<line x1="10" y1="50" x2="50" y2="50" 
style="stroke: rgb(60%, 20%, 60%); stroke-width: 5;"/> 


</svg> 














4-3: 笔画 颜色 


还 有 更 多 指定 颜色 的 方法 ， 它 们 来 自 CSS3 颜色 规范 (http://www.w3.org/TR/css3-color/)。 
尽管 它们 在 浏览 器 中 被 广泛 支持 ， 但 并 不 属于 SVG1.1 规 范 ， 可 能 不 被 其 他 的 SVG 实现 所 
支持 。 比 如 ， 在 写作 本 书 时 ，Apache Batik 和 Inkscape 都 不 支持 。 这 些 方法 共有 三 个 新 颜 





色 函 数 和 一 个 新 关键 词 。 











。 rgba()， 形 式 为 rgba(red-value，green-value，blue-value，alpha-value)， 其 中 颜色 


值 的 取 值 和 rgb() 函数 一 样 ， 


透明 度 (alpha) 的 取 值 范围 是 0~1。 





。 hsl()， 形 式 为 hsl(hue，saturation，lightness)， 其 中 色相 值 (hue) 是 整数 角度 ， 取 
值 是 0~360， 饱 和 度 (saturation) 和 明度 (lightness) 的 取 值 范围 为 整数 0~255 或 者 百 


分 比 0%~100%。 


。 hsla()， 色相、 饱和 度 、 明 度 取 值 与 hst() 一 样 ， 透 明度 取 值 与 rgba() 一 样 。 





。 transparent， 完 全 透明 ， 等 价 于 rgba(90,0,0,0)。 


如 果 不 指定 笔画 颜 
none。 


色 的 话 ， 将 看 不 到 任何 线 ， 因 为 stroke 属性 的 默认 值 是 











4.2.3 stroke-opacity 


到 目前 为 止 ,示例 中 所 有 的 线 都 是 实 线 ， 会 庶 住 任何 在 其 下 面 的 东西 。 我 们 可 以 通过 给 
stroke-opacity 属性 赋值 来 控制 线条 的 不 透明 度 (opacity， 与 透明 度 相 反 )， 取 值 范 围 为 
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0.0~1.0， 甚 中 0 代表 完全 透明 ，1 代表 完全 不 透明 。 小 于 0 的 值 会 被 更 改 为 0， 大 于 1 的 
值 会 被 更 改 为 1。 示例 4-4 演示 了 以 0.2 为 差 值 ， 不 透明 度 从 0.2 到 1 的 变化 ， 结 果 如 
4-4。 图 中 加 了 红色 线 ， 是 为 了 让 你 更 清晰 地 看 到 透明 度 的 不 同 。 





/说 














示例 4-4: 演示 stroke-opacity 
htip://oreillymedia.github.io/sve-essentials-examples/ch04/stroke-opacity.html 


<svg width="200px" height="200px" viewBox="0 0 200 200" 
xmLns="http://www.w3.org/2000/svg"> 
<Line x1="30" y1="0" x2="30" y2="60" 
style="stroke: red; stroke-width: 5;"/> 

<line x1="10" y1="10" x2="50" y2="10" 

style="stroke-opacity: 0.2; stroke: black; stroke-width: 5;"/> 
<line x1="10" y1="20" x2="50" y2="20" 

style="stroke-opacity: 0.4; stroke: black; stroke-width: 5;"/> 
<line x1="10" y1="30" x2="50" y2="30" 

style="stroke-opacity: 0.6; stroke: black; stroke-width: 5;"/> 
<line x1="10" y1="40" x2="50" y2="40" 

style="stroke-opacity: 0.8; stroke: black; stroke-width: 5;"/> 
<line x1="10" y1="50" x2="50" y2="50" 

style="stroke-opacity: 1.0; stroke: black; stroke-width: 5;"/> 


</svg> 


4.2.4 stroke-dasharray 属 性 


如 果 你 需要 点 线 或 虚线 ， 则 需要 使 用 stroke-dasharray 属性 ， 它 的 值 由 一 列 数字 构成 ， 代 
表 线 的 长 度 和 空隙 的 长 度 ， 数 字 之 间 用 逗号 或 空格 分 隔 。 数 字 的 个 数 应 该 为 偶数 ， 但 如 果 
你 指定 的 数字 个 数 为 奇数 ， 则 SVG 会 重复 一 次 ， 使 得 总 个 数 为 偶数 。( 见 示例 4-5 的 最 后 
一 个 实例 。) 














图 4-4: 演示 stroke-opacity 








示例 4-5: 演示 stroke-dasharray 属性 
htip://oreillymedia.github.io/sve-essentials-examples/ch04/stroke-dasharray.html 


<svg width="200px" height="200px" viewBox="0 0 200 200" 
xmlns="http://www.w3.o0rg/2000/svg"> 
<!-- 9 个 像素 的 虚线 ,5 个 像素 的 空隙 --> 
<line x1="10" yi1="10" x2="100" y2="10" 
style="stroke-dasharray: 9, 5; 
stroke: black; stroke-width: 2;"/> 


<!-- 5 个 像素 的 虚线 ,3 个 像素 的 空隙 ,9 个 像素 的 虚线 ,2 个 像素 的 空 除 --> 
<Line x1="10" y1="20" x2="100" y2="20" 





styLe= "stroke-dasharray: 5, 3, 9, 2; 
stroke: black; stroke-width: 2;"/> 


<!-- 复制 奇数 个 数 ,这 等 价 于 :9 个 像素 的 虚线 ,3 个 像素 的 空隙 ， 
5 个 像素 的 虚线 ,9 个 像素 的 空隙 ,3 个 像素 的 虚线 ,5 个 像素 的 空隙 --> 
<Line x1="10" y1="30" x2="100" y2="30" 
style="stroke-dasharray: 9,3,5; 
stroke: black; stroke-width: 2;"/> 
</svg> 


结果 见 图 4-5， 为 了 看 得 更 清晰 ， 此 处 进行 了 放大 。 





























4-5: 演示 stroke-dasharray 


4.3 ”和 矩形 


矩形 是 最 简单 的 基本 形状 ， 只 需要 指定 其 左上 角 的 x 和 yy 坐标 ' 以 及 它 的 宽度 (width) 和 
高 度 (height) 即 可 。 拢 形 内 部 会 使 用 fitLt 属性 代表 的 颜色 进行 填充 ， 如 果 没 有 指定 
fill 颜色 ， 则 会 使 用 黑色 填充 。fill 属性 的 值 可 以 用 4.2.2 节 所 描述 的 任何 一 种 方式 指定 ， 
也 可 以 指定 为 none， 即 不 填充 矩形 内 部 ， 保 持 透 明 。 也 可 以 通过 与 stroke-opacity 一 样 
的 方式 (参见 4.2.3 节 ) 来 指定 fill-opacity。fill 和 fill-opacity 都 是 表现 属性 ， 属 于 
style 属性 的 值 。 




















填充 完 矩 形 内 部 (如果 需 要 的 话 ) 之 后 ， 接 下 来 会 绘制 矩形 的 边框 。 绘 制 过 程 中 可 以 指定 
与 上 文中 画 线 时 指定 的 stroke 一 样 。 如 果 不 指定 stroke， 则 它 的 值 为 none， 将 

绘制 矩形 边框 。 示 例 4-6 中 绘制 了 好 几 个 不 同 的 <rect> 元 素 。 图 4-6 展示 了 结果 ， 为 
Te nd 


示例 4-6: 矩形 
http://oreillymedia.github.io/svg-essentials-examples/ch0O4/rectangle.html 









































<svg width="200px" height="200px" viewBox="0 0 200 200" 
xmlns="http://www.w3.o0rg/2000/svg"> 
<!-- 内 部 填充 为 黑色 ,不 绘制 边框 --> 
<rect x="10" y="10" width="30" height="50"/> 








- 内 部 不 填充 颜色 ,绘制 黑色 边框 --> 
reet x="50" y="10" width="20" height="40" 








注 1: 从 技术 上 讲 ,x 的 值 是 指 矩 形 的 “左右 ” Ls 户 坐 标 中 的 较 小 y 的 值 是 指 和 矩形 的 “上 下 ” 
角 在 当前 ] 户 坐标 中 的 较 小 的 y 值 。 因 为 你 还 没有 用 到 变换 (第 6 章 介绍 ) ,所 以 此 处 使 用 更 易 理解 的 “ 左 
上 和 角 ”。 
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style="fill: none; stroke: black;"/> 


-内 部 填充 为 蓝 色 , 会 制 较 粗 的 、 半 透明 红色 边框 - 
<rect x="10" y="70" width="25" height="30" 
style="fill: #0000ff; 
stroke: red; stroke-width: 7; stroke-opacity: 0.5;"/> 


ls 内 部 填充 为 半 透 明 的 黄色 ， 用 虚线 给 会 制 绿色 边框 - 
<rect x="50" y="70" width="35" height="20" 
style="fill: yellow; fill-opacity: 0.5; 
stroke: green; stroke-width: 2; stroke-dasharray: 5 2"/> 
</svg> 
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4-6: 矩 形 








构成 边框 的 笔画 是 “ 骑 ” 在 坐标 网 格 线 上 的 ， 所 以 一 半 在 矩形 内 ， 一 半 在 算 
形 外 。 通 过 图 4-7 中 的 特写 能 更 清晰 地 看 到 示例 4-6 中 的 红色 半 透 明 的 边框 。 


“] 国 
图 4.7， 半 透明 边框 的 特写 


和 矩形 坐标 的 x 和 y 值 默认 都 为 0。 如 果 指 定 宽 或 高 (width/height) 为 0， 则 拢 形 不 显示 。 
如 果 指 定 宽 或 高 为 负 值 会 报错 。 


圆 角 和 撼 形 

如 果 你 希望 得 到 一 个 贺 角 和 矩形 ， 可 以 分 别 指定 x 方向 和 y 方 向 的 圆 角 半径 。rx (x-radius， 
x 方向 的 圆 角 半径 ) 的 最 大 值 是 矩形 宽度 的 一 半 ， 同 理 ，ry (y-radius，y 方向 的 圆 角 半径 ) 
的 最 大 值 是 矩形 高 度 的 一 半 。 如 果 只 指定 了 rx 和 ry 中 的 一 个 值 ， 则 认为 它们 相等 。 示 例 
4-7 展示 了 rx 和 ry 的 用 法 。 




































































示例 4-7: 圆 角 和 矩形 


http://oreillymedia.github.io/svg-essentials-examples/ch04/rounded-rectangles.html 





<svg width="200px" height="200px" viewBox="0 0 200 200" 


xmlns="http://www.w3.o0rg/2000/svg"> 

<!-- rx 和 ry 相等 ,逐渐 增 大 --> 

<rect x="10" y="10" width="20" height="40" 
style="stroke: black; fill: none;"/> 


<rect x="40" y="10" width="20" height="40" 
style="stroke: black; fill: none;"/> 


<rect x="70" y="10" width="20" height="40" 
style="stroke: black; fill: none;"/> 


<!-- rx 和 ry 不 相等 --> 
<rect x="10" y="60" width="20" height="40" 
style="stroke: black; fill: none;"/> 


<rect x="40" y="60" width="20" height="40" 
style="stroke: black; fill: none;"/> 


</svg> 


rx="2" ry="2" 


rx="5" 


ry="10" 


rx="10" ry="5" 


rx="5" ry="10" 


4-8 显示 了 结果 ， 为 了 看 起 来 更 清晰 ， 带 上 了 坐标 网 格 。 











拱 朝 


二 





4-8: 


4.4 


圆 角 矩 形 


如 果 你 熟悉 CSS 的 border-radius 属性 ， 可 能 知道 通过 设置 圆 角 半 径 为 宽 高 














的 50%， 可 使 矩形 变 成 一 个 圆 或 椭圆 。 














在 SVG 中 你 也 可 以 通过 百分比 来 指 





定 圆 角 半径 的 值 ， 但 会 被 解析 为 相对 视 口 的 宽 高 的 百分比 《和 使 用 百分比 来 


设置 矩形 的 宽 或 高 一 样 )， 而 不 是 相对 和 矩形 本 身 的 宽 高 的 百分比 。 不 过 好 在 

















要 创建 圆 和 椭圆 的 话 ，SVG 有 更 简单 的 方法 。 








圆 和 椭圆 





要 画 一 个 圆 ， 需 要 使 用 <circte> 元 素 ， 并 指定 圆心 的 zx 和 ?坐标 (cx/cy) 以 及 半径 〈r)。 


和 算 形 一 样 ， 不 指定 ftLL 和 stroke 的 情况 下 ， 








圆 会 使 用 黑色 填充 并 且 设 有 轮廓 线 。 





基本 形状 | 39 





椭圆 除了 需要 指定 圆心 的 坐标 外 ， 还 需要 同时 指定 x 方向 的 半径 和 y 方向 的 半径 ， 属 性 分 


别 是 rx 和 ry。 























加 








形 ; 如 











对 圆 和 椭圆 来 说 ， 如 果 省 略 cx 或 者 cy， 则 默认 为 0。 如 果 半 径 为 0， 则 不 会 显示 
果 半 径 为 负数 ， 则 会 报错 。 示例 4-8 画 了 一 些 圆 和 椭圆 ， 结 果 如 图 4-9。 
































示例 4-8: 圆 和 椭圆 


http://oreillymedia.github.io/sveg-essentials-examples/ch0O4/circles-ellipses.html 


<svg width="200px" height="200px" viewBox="0 0 200 200" 
xmlns="http://www.w3.0rg/2000/svg"> 
<circle cx="30" cy="30" r="20" style="stroke: black; fill: none;"/> 
<circle cx="80" cy="30" r="20" 
style="stroke-width: 5; stroke: black; fill: none;"/> 


<ellipse cx="30" cy="80" rx="10" ry="20" 
style="stroke: black; fill: none;"/> 
<ellipse cx="80" cy="80" rx="20" ry="10" 
style="stroke: black; fill: none;"/> 
</svg> 
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图 4-9: 圆 和 椭 


4.5 ”多边形 


除了 和 矩形 、 贺 和 椭圆 ， 你 可 能 还 想 画 六 边 形 、 八 边 形 、 五 角 星 或 者 其 他 封闭 图 形 。 
<polygon> 元 素 可 以 用 来 画 任 意 封闭 图 形 ， 这 个 图 形 也 可 以 像 前 面 说 的 那样 填充 和 绘制 轮 
廊 。 使 用 时 需要 为 points 属性 指定 一 系列 的 x/y 坐标 对 ， 并 用 喜 号 或 者 空格 分 隔 。 表 示 坐 
标的 数字 个 数 必 须 是 偶数 。 指 定 坐 标 时 不 需要 在 最 后 指定 返回 起 始 坐标 ， 因 为 图 形 是 封闭 

会 自动 回 到 起 始 坐 标 。 示 例 4-9 演示 了 使 用 <polygon> 绘制 一 个 平行 四 边 形 、 一 个 五 
角 星 和 一 个 不 规则 图 形 。 



































示例 4-9: 多 边 形 
http://oreillymedia.github.io/sve-essentials-examples/ch04/polygon.html 


<svg width="200px" height="200px" viewBox="0 0 200 200" 
xmlns="http://www.w3.o0rg/2000/svg"> 
<!-- 平行 四 边 行 --> 
<polygon points="15,10 55, 10 45, 20 5, 20" 
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style="fill: red; stroke: black;"/> 


<!-- 五 角 星 --> 
<polygon 
points="35,37.5 37.9,46.1 46.9,46.1 39.7,51.5 
42.3,60.1 35,55 27.7,60.1 30,3,51,5 
23,146.1 - 32; 1.46,1" 
style="fill: #ccffcc; stroke: green;"/> 


<!-- 不 规则 图 形 --> 
<polygon 
points="60 60, 65 72, 80 60, 90 90, 72 80, 72 85, 50 95" 
style="fill: yellow; fill-opacity: 0.5; stroke: black; 
stroke-width: 2;"/> 
</svg> 


结果 如 图 4-10， 为 了 看 起 来 更 清晰 ， 带 上 了 坐标 网 格 。 
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4-10: 多 边 形 


填充 边线 交叉 的 多 边 形 

到 目前 为 止 ， 我 们 看 到 的 多 边 形 都 很 容易 填充 ， 因 为 多 边 形 的 各 边 都 没有 交叉 ， 很 容易 区 
分 出 多 边 形 的 内 部 区 域 和 外 部 区 域 。 但 是 ， 当 多 边 形 的 边 彼此 交叉 的 时 候 ， 要 区 分 哪些 区 
域 是 图 形 内 部 并 不 容易 。 示 例 4-10 使 用 SVG 画 了 一 个 这 样 的 图 形 ， 在 图 4-11 中 ， 中 间 的 
那 部 分 到 底 要 算 图 形 内 部 还 是 图 形 外 部 呢 ? 

示例 4-10: 未 填充 的 边线 交叉 的 多 边 形 


<svg width="200px" height="200px" viewBox="0 0 200 200" 
xmlns="http://www.w3.o0rg/2000/svg"> 





Xl 

































































<poLygon points="48,16 16,96 96,48 0,48 80,96" 
style="stroke: black; fill: none;"/> 


</svg> 











图 4-11: 未 填充 的 边线 交叉 的 多 边 形 
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SVG 有 两 种 判断 某 个 点 是 否 在 多 边 形 中 的 规则 。 分 别 对 应 fill-rule (表现 的 一 部 分 ) 属 
性 的 nonzero (默认 值 ) 和 evenodd。 选 择 不 同 的 规则 会 有 不 同 的 效果 。 示 例 4-11 使 用 了 
这 两 种 规则 来 填充 五 角 星 ， 结 果 如 图 4-12。 














示例 4-11: 不 同 填充 规则 的 效果 
http://oreillymedia.github.io/sve-essentials-examples/ch04/polygon-fill.html 


<svg width="200px" height="200px" viewBox="0 0 200 200" 
xmlns="http://www.w3.0rg/2000/svg"> 


<polygon style="fill-rule: nonzero; fill: yellow; stroke: black;" 
points="48,16 16,96 96,48 0,48 80,96"/> 


<polygon style="fill-rule: evenodd; fill: #00ff00; stroke: black;" 
points="148,16 116,96 196,48 100,48 180,96"/> 


</svg> 














图 4-12: 不 同 填充 规则 的 效果 





填充 规则 的 解释 
为 了 保持 完整 性 ， 还 是 解释 一 下 作 l-rules 的 原理 ， 但 是 你 在 使 用 时 并 不 一 定 要 知道 
这 些 细 节 。nonzero 规则 在 判 否 在 图 形 内 部 时 ， 从 这 个 点 画 一 条 线 到 无 穷 
远 ， 然 后 数 这 条 线 与 图 形 边线 有 多 少 次 交 又 。 如 果 交 又 的 边线 是 从 右 往 左 画 ， 则 总 数 
加 1; 如 果 交 叉 的 边线 是 从 左 往 右 画 ， 则 总 数 减 1。 如 果 最 后 总 数 为 0， 则 认为 该 点 在 
图 形 外 部 ， 否 则 认为 在 图 形 内 部 。 


evenodd 规则 也 画 了 同样 一 条 线 ， 但 它 只 算 与 边线 相交 的 次 数 。 如 果 总 数 是 奇数 ， 则 认 
为 点 在 图 形 内 部 ， 否 则 认为 点 在 图 形 外 部 。 











4.6 ”折线 


， 为 了 使 我 们 关于 基本 形状 的 讨论 更 完整 ， 我 们 回归 到 直线 。 有 了 时候 你 希望 有 一 系列 
ee 你 可 以 使 用 多 个 <Line> 元 素 ， 但 如 果 有 非常 多 线 的 
话 ， 可 能 使 用 <polyline> 元 素 会 更 容易 。 它 与 <poLygon> 有 相同 的 points 属性 ， 不 同 之 处 
在 于 图 形 并 不 封闭 。 示 例 4-12 画 了 一 个 电阻 的 符号 ， 结 果 见 图 4-13。 





























示例 4-12: 折线 
http://oreillymedia.github.io/sve-essentials-examples/ch04/polyline.html 


<svg width="100px" height="50px" viewBox="0 0 100 50" 
xmlns="http://www.w3.o0rg/2000/svg"> 


<polyline 
points="5 20, 20 20, 25 10, 35 30, 45 10， 
55 30, 65 10, 75 30, 80 20, 95 20" 
style="stroke: black; stroke-width: 3; fill: none;"/> 
</svg> 





NW- 








4-13: 折线 


在 使 用 <poLyLine> 时 最 好 将 儿 l 属性 设 为 none， 否 则 SVG 阅读 器 会 尝试 去 
填充 形状 ， 有 时 候 会 意外 地 看 到 如 图 4-14 所 示 的 情况 。 











A 











图 4-14: 填充 的 折线 


4.7 线 帽 和 线 连 接 


当 使 用 <Line> 或 者 <polyline> 画 线 时 ， 可 以 为 stroke-linecap 指定 不 同 的 值 来 确定 线 的 
头 尾 形状 ， 可 能 的 取 值 为 butt 、round、square。 示 例 4-13 中 使 用 了 这 三 个 值 ， 并 加 上 了 
灰色 线 表示 头 尾 的 实际 位 置 。 从 图 4-15 中 可 以 看 到 ，round 和 square 在 起 止 位 置 都 超过 了 
真实 位 置 ， 默 认 值 butt 则 精确 地 与 起 止 位 置 对 齐 。 


示例 4-13: stroke-Linecap 属性 的 不 同 值 
http://oreillymedia.github.io/sve-essentials-examples/ch04/linecap.html 


<line x1="10" y1="15" x2="50" y2="15" 
style="stroke: black; stroke-linecap: butt; stroke-width: 15;"/> 


<line x1="10" y1="45" x2="50" y2="45" 
style="stroke: black; stroke-linecap: round; stroke-width: 15;"/> 


<Line x1="10" yi1="75" x2="50" y2="75" 
style="stroke: black; stroke-linecap: square; stroke-width: 15;"/> 
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<!-- 灰色 线 --> 
<Line x1="10" y1="0" x2="10" y2="100" styLe= "stroke: #999;" /> 
<Line x1="50" y1="0" x2="50" y2="100" style="stroke: #999;" /> 














图 4-15， stroke-linecap 属性 的 不 同 值 




















工 











你 也 可 以 通过 stroke-Linejoin 属性 来 指定 线段 在 图 形 棱角 处 交叉 时 的 效果 ， 可 能 的 取 值 
为 miter ( 尖 的 )、round ( 圆 的 )、bevel ( 平 的 )。 示 例 4-14 演示 了 这 些 不 同 的 值 ， 结 果 见 
图 4-16。 


示例 4-14: stroke-linejoin 属性 的 不 同 值 
http://oreillymedia.github.io/sve-essentials-examples/ch04/linejoin.html 


<polyline 
style="stroke-linejoin: miter; stroke: black; stroke-width: 12; 
fill: none;" 
points="30 30, 45 15, 60 30"/> 


<polyline 
style="stroke-linejoin: round; stroke: black; stroke-width: 12; 
fill: none;" 
points="90 30, 105 15, 120 30"/> 


<polyline 
style="stroke-linejoin: bevel; stroke-width: 12; stroke: black; 
fill: none;" 
points="150 30, 165 15, 180 30"/> 





从 AAA 人 
图 4-16: stroke-linejoin 属性 的 不 同 值 








如 果 两 条 线 相交 时 是 锐角 ， 且 stroke-Linejoin 的 值 为 miter， 则 相交 处 有 
可 能 比 线 本 身 要 宽 。 你 可 以 指定 stroke-miterLimit 的 值 来 设置 相交 处 的 显 
me 的 比率 ， 它 的 默认 值 为 4。 


4. 8 基本 状 总 结 


下 面 的 表格 总 结 了 SVG 中 的 基本 形状 以 及 它们 的 表现 风格 。 








4.8.1 形状 元 素 
表 4-1 总 结 了 SVG 中 的 基本 形状 。 


表 4-1: SVG 中 的 基本 形状 


描述 





<line x1="start-x" yl="start-y" 
x2="end-x" y2="end-y" /> 


<rect x="left-x" y="top-y" 
width="width" height="height" /> 


<circle cx="center-x" cy="center-y" 
r="radius" /> 


<ellipse cx="center-x" cy="center-y" 
rx="x-radius" ry="y-radius" /> 


<polygon points="points-list" /> 


<polyline points="points-list" /> 


从 起 始点 (start-x，start-y) 画 一 条 线 到 (end-x，end-y) 


画 一 个 矩形 ， 左 上 角 位 于 (left-x，top-y)， 宽 高 分 别 为 width 
和 height 











以 指定 半径 radius 画 一 个 圆 ， 圆 心 位 于 (center-x，center-y) 











区 | 


一 个 椭圆 ,x 方向 半径 为 x-radius, y 方 向 半径 为 y-radius， 
圆心 位 于 (center-x，center-y) 

一 个 封 闲 图形， 轮廓 由 points-List 指定 ， 它 由 一 系列 x/y 坐 
标 对 组 成 。 这 些 数值 只 能 使 用 用 户 坐 标 ， 不 可 以 添加 长 度 单位 
一 系列 相连 的 折线 段 ， 折 线 点 由 points-list 指定 ， 它 由 一 系 
列 zj 坐标 对 组 成 。 这 些 数值 只 能 使 用 用 户 坐 标 ， 不 可 以 添加 
长 度 单位 





名 


吾 | 
































可 




















当 你 为 属性 指定 数值 时 ， 默 认 会 以 用 户 坐 标 为 准 。 表 4-1 中 除了 最 后 两 个 元 素 以 外 ， 甚 他 
元 素 的 属性 都 可 以 在 数字 后 加 上 单位 ， 比 如 mm、pt 等 。 如 : 














<Line x1="1icm" y1="30" x2="50" y2="10pt" /> 


4.8.2 ”指定 颜色 


可 以 通过 以 下 儿 种 方式 指定 填充 或 者 轮 廊 的 颜色 。 


。 none， 表 示 不 绘制 轮廓 ， 或 者 不 为 形状 填充 颜色 。 
。 基本 颜色 名 称 ，aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、 


purple、 red、silver、teal、white 和 yellow。 

。 SVG 规范 中 规定 的 扩展 颜色 名 称 (http://www.w3.org/TR/SVG/types.html#ColorKeywords)。 

。 6 位 十 六 进 制 数字 #rggbb， 从 前 往 后， 每 两 位 分 别 表示 红 、 绿 、 蓝 色 值 。 

。 3 位 十 六 进 制 数 字 #rgb，3 位 数字 分 别 表示 红 、 绿 、 蓝 色 值 。 这 是 前 一 种 方法 的 缩写 ， 
每 位 数字 重复 一 次 的 话 ，#rgb 和 #rrggbb 等 价 。 

。 rgb(r，g，b)， 每 个 值 的 范围 为 0~255 或 者 0%~100%。 

。 currentColor ,来 自 元 素 的 (当前 应 用 的 ) color 属性 ， 一 般 是 继承 的 。 

。 CSS3 颜色 模块 (http://www.w3.0org/TR/css3-color/) 规范 规定 的 其 他 方法 (可 能 不 能 被 


所 有 的 SVG 实现 支持 )。 
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4.8.3 笔画 和 填充 特性 
为 了 使 线 或 者 轮廓 显示 出 来 ， 必 须 使 用 以 下 属性 指定 笔画 的 特性 。 图 形 的 轮廓 会 在 内 部 填 
充 完 之 后 进行 绘制 。 表 4-2 中 总 结 的 所 有 特性 都 是 表现 特性 ， 都 属于 style 属性 。 


表 4-2: 笔画 特性 




































































属 性 值 

stroke 笔画 颜色 ， 使 用 4.8.2 节 中 的 方法 指定 ， 默 认 值 为 none 

stroke-width 笔画 宽度 ， 可 用 用 户 坐 标 或 者 指定 单位 的 方式 指定 。 笔 画 的 宽度 会 相对 坐标 网 格 
线 居 中 。 默 认 值 为 1 

stroke-opacity 数字 ， 从 0.0 到 1.0。0.0 是 完全 透明 ，1.0 是 完全 不 透明 (默认 值 ) 

stroke-dasharray j 一 系列 的 数字 来 指定 虚线 和 间隙 的 长 度 。 这 些 数字 只 能 使 用 用 户 坐 标 ， 默 认 值 
为 none 

stroke-Linecap 线头 尾 的 形状 ， 值 为 butt (默认 值 )、round 或 square 

stroke-linejoin 图 形 的 棱角 或 者 一 系列 连 线 的 形状 ， 取 值 为 mter ( 尖 的 ， 默认 值 )、round 或 者 


bevel ( 平 的 ) 
stroke-miterlimit 相交 处 显示 宽度 与 线 宽 的 最 大 比例 ， 默 认 值 为 4 





你 可 以 使 用 表 4-3 中 的 属性 来 控制 图 形 内 部 填充 的 方式 。 图 形 会 首先 填充 内 部 再 绘制 轮廓 。 
表 4-3: 填充 特性 














属 性 值 

fill 按 4.8.2 节 中 描述 的 方式 指定 填充 颜色 ， 默 认 值 为 black 

fill-opacity 从 0.0 到 1.0 的 数字 ，0.0 表示 完全 透明 ，1.0 (默认 值 ) 表示 完全 不 透明 
fill-rule 属性 值 为 nonzero (默认 值 ) 或 evenodd。 该 属性 决定 判断 某 个 点 是 否 在 图 








Ti 立 
ey 











部 的 方法 。 只 有 当 边 线 交 叉 时 或 者 内 部 有 “ 洞 ”时 才 有 效 。 详 细 描 述 见 4.5 7 











这 些 只 是 SVG 元 素 上 可 以 应 用 的 一 部 分 样式 属性 ， 附 录 B 中 的 表 B-1 是 完整 列表 。 
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文 要 结构 








前 面 曾 提 到 过 ，SVG 允许 我 们 将 文档 表现 与 文档 结构 分 离 。 本 章 ， 我 们 将 对 比 文档 结构 和 
文档 表现 ， 详 细 讨 论文 档 的 表现 ， 然 后 展示 一 些 可 以 使 文档 结构 更 清晰 、 更 可 读 以 及 更 容 
易 维护 的 SVG 元 素 。 


5.1 结构 和 表现 


正如 1.4.2 市 提 到 的 ，XML 的 目标 之 一 便 是 提供 一 种 能 将 结构 从 视觉 表示 中 独立 出 来 的 方 
法 。 考 虑 一 下 第 1 章 中 绘制 的 猫 ， 我 们 根据 它 的 结构 一 一 各 种 几何 图 形 的 位 置 和 尺寸 一 一 
认 出 它 是 一 只 猫 。 如 果 我 们 改变 结构 ， 比 如 缩短 胡须 、 把 鼻子 变 圆 、 将 耳 打 变 圆 变 长 ， 那 
么 不 管 它 看 起 来 是 什么 样 ， 绘 图 都 会 变 成 一 只 兔子 。 也 就 是 说 ， 结 构 会 告诉 你 图 形 是 什么 。 


这 并 不 是 说 视觉 样式 信息 不 重要 。 如 果 我 们 绘制 紫色 线条 和 灰色 填充 的 猫 ， 你 也 能 认 出 它 
是 一 只 猫 ， 只 是 长 得 不 那么 好 看 。 其 区 别 如 图 5-1 所 示 。XML 鼓励 我 们 分 离 结构 和 表现 ， 
但 不 幸 的 是 ， 关 于 XML 的 很 多 讨论 都 强调 结构 而 非 表 现 。 我 们 将 通过 详细 讨论 如 何在 


SVG 中 指定 表现 来 纠正 这 一 错误 。 
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5.2 在 SVG 中 使 用 样式 


SVG 允许 我 们 使 用 四 种 方式 指定 图 形 表现 方面 的 信息 : 内 联 样式 、 内 部 样式 表 、 外 部 样式 
表 以 及 表现 属性 。 让 我 们 来 依次 看 看 每 一 种 方式 。 


5.2.1 内 联 样式 
示例 5-1 使 用 了 内 联 样式 。 到 目前 为 止 我 们 都 是 使 用 这 种 方式 指定 表现 信息 ， 我 们 设置 
style 属性 的 值 为 一 系列 视觉 属性 ， 它 们 的 值 如 附录 B 所 述 。 


示例 5-1: 使 用 内 联 样式 
<circle cx="20" cy="20" r="10" 
style="stroke: black; stroke-width: 1.5; fill: blue; 
fill-opacity: 0.6"/> 




















5.2.2 内 部 样式 表 

可 以 通过 一 个 内 部 样式 表 来 罗列 常用 的 样式 ， 而 无 需 在 每 个 SVG 元 素 内 植 人 样式 。 这 样 
可 以 为 所 有 某 一 类 元 素 应 用 样式 ， 也 可 以 使 用 命名 类 为 特定 元 素 应 用 样式 。 示 例 5-2 建立 
了 一 个 内 部 样式 表 ， 这 将 会 为 所 有 的 圆 绘制 一 条 蓝 色 双 倍 粗 的 虚线 并 使 用 浅黄 色 填 充 内 
部 。 内 部 样式 表 被 定义 在 <defs> 元 素 内 ， 稍 后 将 在 本 章 详细 讨论 。 


这 个 例子 中 还 绘制 了 好 几 个 圆 。 图 5-2 第 二 行 中 的 圆 使 用 内 联 样式 覆盖 了 内 部 样式 表 中 的 
声明 。 


示例 5-2: 使 用 内 部 样式 表 


http://oreillymedia.github.io/svg-essentials-examples/ch0S/internal-stylesheets.html 









































<svg width="200px" height="200px" viewBox="0 0 200 200" 
xmlns="http://www.w3.o0rg/2000/svg"> 
<defs> 
<style type="text/css"><![CDATA[ 
circle { 

FEL ffes 
stroke: blue; 
stroke-width: 2; 
stroke-dasharray: 5 3; 


]]></style> 
</defs> 


<circle cx="20" cy="20" r="10"/> 
<circle cx="60" cy="20" r="15"/> 
<circle cx="20" cy="60" r="10" style="fill: #cfc"/> 
<circle cx="60" cy="60" r="15" 

style="stroke-width: 1; stroke-dasharray: none;"/> 
</svg> 
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5-2: SVG 中 的 内 部 样式 表 


5.2.3 ”外 部 样式 表 

如 果 想 要 为 多 个 SVG 文档 应 用 一 组 样式 ， 可 以 通过 为 每 个 SVG 元 素 复 制 和 粘贴 内 部 样式 
表 的 方式 来 实现 。 但 是 如 果 你 希望 能 统一 修改 这 些 文档 的 样式 ， 则 会 发 现 这 种 方法 是 不 切 
实际 的 。 我 们 应 该 把 开始 和 结束 <style> 标签 (不 包括 <!CDATA[ ]]>) 之 间 的 所 有 样式 信 
息 保 存在 一 个 外 部 文件 中 ， 然 后 把 它 变 成 一 个 外 部 样式 表 。 示 例 5-3 展示 了 保存 在 命名 为 
ext_style.css 的 文件 中 的 外 部 样式 表 。 这 个 样式 表 使 用 了 多 种 选择 器 ， 包 括 *， 它 为 SVG 
元 素 内 所 有 没有 任何 其 他 样式 的 元 素 设置 了 一 个 默认 样式 。 生 成 的 结果 如 图 5-2 所 示 。 


示例 5-3: 外 部 样式 表 
* {fill: none; stroke: black; } /* 所 有 元 素 默认 样式 */ 


























rect { stroke-dasharray: 7 3; } 
circle.yellow { fill: yellow; } 
.thick { stroke-width: 5; } 


.semiblue { fill: blue; fill-opacity: 0.5; } 





站 外 < 


人 玉 











5-3: SVG 中 的 外 部 样式 表 


示例 5-4 展示 了 引用 外 部 样式 表 的 完整 SVG 文档 (包含 <?xmL ...?>、<?xmL-styLesheet ...?> 
和 <!DOCTYPE> ) 。 





示例 5-4: 引用 外 部 样式 表 的 SVG 文件 
<?xml version="1.0"?> 
<?xml-stylesheet href="ext_style.css" type="text/css"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" 
width="200px" height="200px" viewBox="0 0 200 200"> 


<Line x1="10" y1="10" x2="40" y2="10"/> 
<rect x="10" y="20" width="40" height="30"/> 
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<circle class="yellow" cx="70" cy="20" r="10"/> 
<polygon class="thick" points="60 50, 60 80, 90 80"/> 
<polygon class="thick semiblue" 

points="100 30, 150 30, 150 50, 130 50"/> 
</svg> 


内 联 样式 几乎 总 是 比 内 部 或 者 外 部 样式 表 泻 染 得 更 快 ， 这 是 因为 样式 表 和 类 


增加 了 泻 染 时 的 查询 和 解析 时 间 。 然 而 样式 表 更 容易 管理 ， 更 小 的 文件 体积 
和 可 缓存 的 特性 可 以 加 快 文档 加 载 速度 。 

















5.2.4 ”表现 属性 
虽然 绝 大 多 数 SVG 文档 都 使 用 样式 来 表达 表现 信息 ， 但 SVG 的 确 允 许 我 们 使 用 表现 属 ' 
指定 这 些 信 息 。 我 并 不 是 指 像 这 样 指定 : 


<circle cx="10" cy="10" r="5" 
style="fill: red; stroke:black; stroke-width: 2;"/> 


这 





而 是 指 可 以 编写 每 个 表现 属性 为 独立 的 属性 : 


<circle cx="10" cy="10" r="5" 
fill="red" stroke="black" stroke-width="2"/> 


如 果 你 觉得 这 样 做 混合 了 结构 与 表现 ， 那 么 你 是 对 的 。 不 过 ， 当 我 们 通过 将 XML 数据 源 
转换 为 SVG 的 方式 来 创建 SVG 文档 时 ， 表 现 属性 会 派 上 用 场 ， 我 们 将 在 第 15 章 看 到 这 
样 的 情况 。 在 这 些 情 况 下 ， 为 每 个 表现 属性 创建 独立 的 属性 ， 要 比 为 一 个 style 属性 创建 
内 容 更 容易 。 如 果 使 用 SVG 的 环境 不 支持 样式 表 ， 可 能 需要 使 用 表现 属性 。 

表现 属性 位 于 优先 级 列表 的 最 底部 。 任 何 来 自 内 联 样式 、 内 部 样式 表 或 者 外 部 样式 表 的 样 
式 声 明 都 会 覆盖 表现 属性 ， 但 表现 属性 会 覆盖 继承 的 样式 。 在 下 面 的 SVG 文档 中 ， 圆 会 
被 填充 为 红色 ， 而 不 是 绿色 : 






































<svg width="200" height="200" 
xmlns="http://www.w3.o0rg/2000/svg"> 
<defs> 
<style type="text/css"><![CDATA[ 
circle { fill: red; } 
]]></style> 
</defs> 
<circle cx="20" cy="20" r="15" fill="green"/> 
</svg> 


我 们 再 次 强调 ， 指 定 表现 信息 的 首选 应 该 是 使 用 style 属性 或 者 样式 表 。 样 式 表 允 许 我 们 
为 文档 中 的 某 些 元 素 应 用 一 系列 复杂 的 填充 和 笔画 特性 ， 而 不 必 为 每 个 元 素 复 制 一 遍 表 现 
信息 ， 这 正 是 表现 属性 所 应 该 有 的 效果 。 样 式 表 的 能 力 和 灵活 性 允许 我 们 花 最 少 的 精力 就 
能 改变 对 多 个 文档 的 外 观 。 
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5.3 分 组 和 引用 对 象 


虽然 可 以 将 所 有 的 绘图 看 成 是 由 一 系列 几乎 一 样 的 形状 和 线条 组 成 的 ， 但 通常 我 们 还 是 认 
为 大 多 数 非 抽象 的 艺术 作品 都 是 由 一 系列 命名 对 象 组 成 的 ， 而 这 些 对 象 由 形状 和 线条 组 合 
而 成 。SVG 提供 了 一 些 元 素 ， 允 许 我 们 对 元 素 进行 这 样 的 分 组 ， 从 而 使 文档 更 加 结构 化 、 
更 易 理 解 。 


5.3.1 ”<g> 元 素 

<g> 元 素 会 将 其 所 有 子 元 素 作 为 一 个 组 合 ， 通 常 组 合 还 会 有 一 个 唯一 的 id 作为 名 称 。 每 个 
组 合 还 可 以 拥有 自己 的 <title> 和 <desc> 来 供 基 于 文本 的 XML 应 用 程序 识别 ， 或 者 为 视 
障 用 户 提 供 更 好 的 可 访问 性 。 许 多 SVG 演 染 代理 都 会 在 鼠标 十 停 或 者 轻 触 组 合 内 的 图 形 























时 显示 一 个 提示 框 ， 显 示 <title> 元 素 的 内 容 。 屏 幕 阅 读 器 也 会 读 取 <title> 和 <desc> 元 
素 的 内 容 。 


<g> 元 素 可 以 组 合 元 素 ， 并 为 它们 提供 一 些 注解 ， 这 使 得 我 们 的 文档 结构 更 为 清晰 。 除 
此 之 外 ，<g> 元 素 还 提供 了 一 些 书写 上 的 便利 。 在 起 始 <g> 标签 中 指定 的 所 有 样式 会 应 
用 于 组 合 内 的 所 有 子 元 素 。 如 示例 5-5， 我 们 可 以 不 用 复制 如 图 5-4 所 示 的 每 个 元 素 上 的 
style="fill:none; stroke:black;"。 而 且 组 合 还 可 以 彼此 岁 套 ， 我 们 会 在 第 6 章 看 到 这 样 
的 例子 。 


























<g> 元 素 类 似 于 Adobe Illustrator 等 程序 中 的 组 合 对 象 (Group Objects) 功能 。 它 还 提供 了 
一 个 功能 ， 类 似 于 这 些 程序 中 “ 层 ” 的 概念 ， 一 个 层 就 是 一 些 相关 对 象 构成 的 分 组 。 


示例 5-5: 简单 使 用 <g> 元 素 
<svg width="240px" height="240px" viewBox="0 0 240 240" 
xmlns="http://www.w3.o0rg/2000/svg"> 
<title>Grouped Drawing</title> 
<desc>Stick-figure drawings of a house and people</desc> 





<g id="house" style="fill: none; stroke: black;"> 
<desc>House with door</desc> 
<rect x="6" y="50" width="60" height="60"/> 
<polyline points="6 50, 36 9, 66 50"/> 
<polyline points="36 110, 36 80, 50 80, 50 110"/> 
</g> 


<g id="man" style="fill: none; stroke: black;"> 
<desc>Male human</desc> 
<circle cx="85" cy="56" r="10"/> 
<line x1="85" y1="66" x2="85" y2="80"/> 
<polyline points="76 104, 85 80, 94 104" /> 
<polyline points="76 70, 85 76, 94 70" /> 
</g> 
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<g id="woman" style="fill: none; stroke: black;"> 
<desc>Female human</desc> 
<circle cx="110" cy="56" r="10"/> 
<polyline points="110 66, 110 80, 100 90, 120 90, 110 80"/> 
<Line x1="104" y1="104" x2="108" y2="90"/> 
<Line x1="112" y1="90" x2="116" y2="104"/> 
<polyline points="101 70, 110 76, 119 80"/> 

</g> 

</svg> 








A 








图 5-4: 分 组 火柴 人 


5.3.2 ”<use> 元 素 


复杂 的 图 形 中 经 常会 出 现 重复 的 元 素 。 比 如 ， 产 品 手册 可 能 在 每 一 页 的 左上 角 和 右 下 角 都 
有 公司 的 标志 。 如 有 果 我 们 使 用 绘图 设计 程序 绘制 宣传 册 ， 只 需 绘 制 一 次 标志 ， 然 后 将 所 有 
的 元 素 组 合 在 一 起 ， 就 能 将 它们 复制 并 粘贴 到 其 他 位 置 。SVG 使 用 <use> 元 素 ， 为 定义 在 
<g> 元 素 内 的 组 合 或 者 任意 独立 图 形 元 素 〈 比 如 只 想 定 义 一 次 的 复杂 多 边 形 形状 ) 提供 了 
类 似 复制 粘贴 的 能 力 。 


























定义 了 一 组 图 形 对 象 后， 可 以 使 用 <use> 标签 再 次 显示 它们 。 要 指定 想 要 重用 的 组 合 ， 给 
xLink:href 属性 指定 URI 即 可 ， 同 时 还 要 指定 x 和 y 的 位 置 以 表示 组 合 的 (0, 0) 应 该 移动 
到 的 位 置 (6.1 节 会 介绍 实现 这 一 效果 的 另 一 种 方法 )。 因 此 ， 为 了 创建 另 一 个 如 图 5-5 那 





样 的 房子 和 一 组 小 人 ， 只 要 把 这 些 线条 放 到 闭合 </svg> 标签 之 前 即 可 。 


<use xlink:href="#house" x="70" y="100"/> 
<use xlink:href="#woman" x="-80" y="100"/> 
<use xlink:href="#man" x="-30" y="100"/> 





A 


双全 











图 5-5: 复 用 组 合 的 火柴 人 
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5.3.3 ”<defs> 元 素 
你 可 能 已 经 注意 到 前 面 那个 例子 有 以 下 几 个 缺点 。 


。 复 用 man 和 woman 组 合 时 ， 需 要 知道 原始 图 像 中 这 些 图 形 的 位 置 ， 并 以 此 位 置 作为 复 用 
的 基础 ， 而 不 是 使 用 诸如 0 这 样 简 单 的 数字 。 

。 房子 的 填充 和 笔画 颜色 由 原始 图 形 建立 ， 并 且 不 能 通过 <use> 元 素 窗 盖 。 这 意味 着 我 们 
不 能 构造 一 行 彩 色 的 房子 。 

。 文档 中 会 画 出 所 有 的 三 个 元 素 woman、man 和 house。 我 们 并 不 能 将 它们 单独 “存储 ”下 
来 ， 然 后 只 绘制 一 排 房 子 或 者 只 绘制 一 组 人 。 


<defs> (定义 ) 元 素 可 以 解决 这 些 问题 。 通 过 在 起 始 和 结束 <defs> 标记 之 间 放 置 这 些 组 合 
对 象 ， 我 们 可 以 告诉 SVG 人 它们 。 实 际 上 ，SVG 规范 推荐 我 们 将 所 有 想 要 
复 用 的 对 象 放置 在 <defs> 元 素 内 ， 这 样 SVG 阅读 器 进入 流 式 环境 中 就 能 更 高 效 地 处 理 数 
据 。 在 示例 5-6 中 ，house、man 和 woman 被 定义 在 左上 角 (0, 0) 处 ， 并 且 没 有 为 房子 指定 
任何 填充 颜色 。 由 于 组 合 在 <defs> 元 素 内 ， 它 们 不 会 立刻 绘制 到 屏幕 上 ， 而 是 作为 “ 模 
板 ” 供 其 他 地 方 使 用 。 我 们 还 构建 了 另 一 个 命名 为 couple 的 组 合 ， 它 通过 <use> 使 用 man 
和 woman 组 合 。( 注 意图 5-6 中 下 半 部 分 并 不 能 使 用 couple， 因为 图 形 的 排列 不 一 样 .) 



























































示例 5-6: <defs> 元 素 
http://oreillymedia.github.io/svg-essentials-examples/ch05/defs-example.html 


<svg width="240px" height="240px" viewBox="0 0 240 240" 
xmlns="http://www.w3.o0rg/2000/svg"> 

<title>Grouped Drawing</title> 

<desc>Stick-figure drawings of a house and people</desc> 


<defs> 
<g id="house" style="stroke: black;"> 
<desc>House with door</desc> 
<rect x="0" y="41" width="60" height="60"/> 
<polyline points="0 41, 30 0, 60 41"/> 
<polyline points="30 101, 30 71, 44 71, 44 101"/> 
</g> 


<g id="man" style="fill: none; stroke: black;"> 
<desc>Male stick figure</desc> 
<circle cx="10" cy="10" r="10"/> 
<Line x1="10" y1="20" x2="10" y2="44"/> 
<polyline points="1 58, 10 44, 19 58"/> 
<polyline points="1 24, 10 30, 19 24"/> 

</g> 


<g id="woman" style="fill: none; stroke: black;"> 
<desc>Female stick figure</desc> 
<circle cx="10" cy="10" r="10"/> 
<polyline points="10 20, 10 34, 0 44, 20 44, 10 34"/> 
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<line x1="4" y1="58" x2="8" y2="44"/> 

<line x1="12" y1="44" x2="16" y2="58"/> 

<polyline points="1 24, 10 30, 19 24" /> 
</g> 


<g id="couple"> 
<desc>Male and female stick figures</desc> 
<use xlink:href="#man" x="0" y="0"/> 
<use xlink:href="#woman" x="25" y="0"/> 
</g> 
</defs> 


<!-- 利用 组 合 定义 --> 
<use xlink:href="#house" x="0" y="0" style="fill: #cfc;"/> 
<use xlink:href="#couple" x="70" y="40"/> 


<use xlink:href="#house" x="120" y="0" style="fill: #99f;"/> 
<use xlink:href="#couple" x="190" y="40"/> 


<use xlink:href="#woman" x="0" y="145"/> 
<use xlink:href="#man" x="25" y="145"/> 
<use xlink:href="#house" x="65" y="105" style="fill: #c00;"/> 





会 六 会 
六合 














5-6: 在 <defs> 内 使 用 组 合 的 结果 








<use> 元 素 并 不 限制 只 能 使 用 同一 文件 内 的 对 象 ， 事实 上 xLink:href 属性 可 以 指定 任意 
效 的 文件 或 者 URI。 这 使 得 我 们 可 以 将 一 组 公用 元 素 集合 在 一 个 SVG 文件 内 ， 然 后 在 其 
他 文件 中 选择 性 地 使 用 它们 。 比 如 ， 我 们 可 以 创建 一 个 名 为 identity.svg 的 文件 ， 该 文件 包 





含 你 的 组 织 要 使 用 的 所 有 标识 图 形 : 


<g id="company_mascot"> 
<!-- 绘制 企业 吉祥 物 --> 
</g> 


<g id="company_logo" style="stroke: none;"> 
<polygon points="0 20, 20 0, 40 20, 20 40" 
style="fill: #696;"/> 
<rect x="7" y="7" width="26" height="26" 
style="fill: #c9c;"/> 
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邮 


</g> 


<g id="partner_logo"> 
<!-- 绘制 合作 伙伴 的 Logo - -> 
</g> 


然后 使 用 如 下 方式 引用 它们 : 


<use xlink:href="identity.svg#company_logo" x="200" y="200"/> 


出 于 安全 的 原因 ， 并 非 所 有 的 SVG 阅读 器 都 支持 外 部 引用 ， 尤 其 是 Web 浏 
览 器 。 有 些 浏 览 器 (尤其 是 焉 ) 完全 不 支持 外 部 文件 引用 。 其 他 浏览 器 也 
只 允许 <use> 元 素 引 用 同一 域 下 的 文件 或 者 专门 配置 了 允许 跨 域 使 用 的 Web 
服务 器 上 的 文件 。 




















5.3.4 <symbol> 元 素 


<symbol> 元 素 提 供 了 另 一 种 组 合 元 素 的 方式 。 和 <9g> 元素 不 同 ，<symbol> 元 素 永 远 不 
会 显示 ， 因 此 我 们 无 需 把 它 放 在 <defs> 规范 内 。 然 而 ， 我 们 仍然 习惯 将 它 放 到 <defs> 
中 ， 因 为 symbol 也 是 我 们 定义 的 供 后 续 使 用 的 元 素 。symbol 还 可 以 指定 viewBox 和 
preserveAspectRatio 属性 ， 通 过 给 <use> 元 素 添 加 width 和 height 属性 就 可 以 让 symbol 
适 配 视 口 大 小 。 示 例 5-7 展示 了 忽略 width 和 height 的 简单 组 合 〈 前 两 个 八 边 形 )， 但 
在 使 用 symbol 时 使 用 了 这 两 个 属性 。 图 5-7 右 下 角 的 八 边 形 边缘 被 裁减 了 ， 这 是 因为 
preserveAspectRatio 属性 被 设置 为 slice。 其 包含 的 <rect> 元 素 展 示 了 每 个 <use> 元 素 的 
从 标 


iN\o 





























示例 5-7: symbol 与 组 合 
http://oreillymedia.github.io/sve-essentials-examples/ch05/symbol.html 


<svg width="200px" height="200px" viewBox="0 0 200 200" 
xmlns="http://www.w3.0rg/2000/svg"> 

<title>Symbols vs. groups</title> 

<desc>Use</desc> 


<defs> 
<g id="octagon" style="stroke: black;"> 
<desc>0ctagon as group</desc> 
<polygon points=" 
36 255 25. 36; 11 36; © 25.; 
0 11, 11 0, 25 0, 36 11"/> 
</g> 


<symbol id="sym-octagon" style="stroke: black;" 
preserveAspectRatio="xMidYMid slice" viewBox="0 0 40 40"> 
<desc>0ctagon as symbol</desc> 
<polygon points=" 
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36 25, 25 36，11 36，0 25， 
0 11, 11 0, 25 0, 36 11"/> 
</symbol> 
</defs> 


<g style="fill:none; stroke:gray"> 
<rect x="40" y="40" width="30" height="30"/> 
<rect x="80" y="40" width="40" height="60"/> 
<rect x="40" y="110" width="30" height="30"/> 
<rect x="80" y="110" width="40" height="60"/> 

</g> 

<use xlink:href="#octagon" x="40" y="40" width="30" height="30" 
style="fill: #c00;"/> 

<use xlink:href="#octagon" x="80" y="40" width="40" height="60" 
style="fill: #cc0;"/> 

<use xlink:href="#sym-octagon" x="40" y="110" width="30" height="30" 
style="fill: #cfc;"/> 

<use xlink:href="#sym-octagon" x="80" y="110" width="40" height="60" 
style="fill: #699;"/> 

</svg> 














© 
器 




















图 5-7: 组 合 与 symbol 


5.3.5 ”<image> 元 素 


<use> 元 素 允 许 我 们 复 用 SVG 文件 的 一 部 分 ， 而 <image> 元 素 可 以 包含 一 个 完整 的 SVG 
或 者 栅 格 文件 。 如 果 包 含 一 个 SVG 文件 ， 其 视 口 会 基于 引用 文件 的 x、y、width 和 height 
属性 来 建立 ， 如 果 包 含 一 个 栅 格 文件 ， 它 会 被 缩放 以 适 配 该 属性 指定 的 矩形 。SVG 规范 要 
求 阅 读 器 支持 JPEG 和 PNG 两 种 栅 格 文件 ， 阅 读 器 还 可 能 支持 其 他 文件 ， 比 如 大 多 数 浏 览 
器 还 支持 GIF。 示 例 5-8 展示 了 如 何在 SVG 文件 内 包含 JPEG 文件 。 结 果 如 图 5-8 所 示 。 

















示例 5-8: 使 用 <defs> 元 素 
<svg width="310px" height="310px" viewBox="0 9 310 310" 
xmlns="http://www.w3.0rg/2000/svg"> 


<ellipse cx="154" cy="154" rx="150" ry="120" style="fill: #999999;"> 目 
<ellipse cx="152" cy="152" rx="150" ry="120" style="fill: #cceeff;"> @ 


<image xlink:href="kwanghwamun.jpg"” © 
x="72" y="92" @ 
width="160" height="120"/> © 


</svg> 





@ 创建 一 个 灰色 椭圆 模拟 投影 。。 




















@ 创建 主 蓝 色 椭圆 形 。 因 为 它 在 灰色 椭圆 之 后 出 现 ， 因 此 它 显示 在 灰色 椭圆 之 上 。 
@ 指定 要 包含 文件 的 URI。 
@ 指定 图 像 的 左上 角 位 置 。 














© 指定 图 片 应 该 被 缩放 的 宽度 和 高 度 。 




















5-8: 包含 在 SVG 文件 内 的 JPEG 图 像 


如 果 图 像 文 件 的 尺寸 与 元 素 的 宽度 和 高 度 不 匹配 ，<image> 元 素 可 以 使 用 preserveAspectRatio 
属性 指示 浏 览 器 应 该 怎么 处 理 。 其 默认 值 为 xMidYMid meet， 这 会 缩放 图 像 并 居中 显示 在 
指定 的 矩形 中 (可 查看 3.4 节 )。 如 果 包 含 一 个 SVG 文件 ， 还 可 以 在 preserveAspectRatio 
值 的 开头 添加 defer 关键 字 (比如 defer xMidTMid meet) ; 这 样 如 果 包 含 的 图 像 也 有 
preserveAspectRatio 属性 ， 则 会 使 用 图 像 的 属性 来 替代 默认 值 。 





























注 1: 11.2 节 我 们 会 看 到 另 一 种 创建 投影 的 方式 。 
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第 6 章 











到 目前 为 止 ， 所 有 图 形 都 是 什么 样 就 显示 成 什么 样 ， 即 按照 属性 中 指定 的 位 置 和 方式 来 显 
示 。 有 时 候 我 们 可 能 想 要 旋转 、 缩 放 或 者 移动 图 片 到 新 的 位 置 。 为 了 完成 这 些 任务 ， 我 们 
可 以 给 对 应 的 SVG 元 素 添 加 transforn 属性 。 本 章 会 研究 这 些 变换 的 细 市 。 

















6.1 transLate 变 


在 第 5 章 我 们 已 经 见 过 ， 可 以 为 <use> 元 素 使 用 x 和 y 属性 ， 以 在 特定 的 位 置 放置 图 形 对 
象 组 合 。 查 看 示例 6-1 中 的 SVG， 它 定义 了 一 个 正方 形 并 将 它 绘制 在 网 格 的 左上 角 ， 然 后 
在 左上 和 角 坐 标 (50, 50) 处 重新 绘制 了 它 。 图 6-1 中 的 虚线 并 不 是 SVG 的 一 部 分 ， 它 只 是 用 
来 展示 画布 。 











示例 6-1: 使 用 <use> 移动 图 形 
<svg width="200px" height="200px" viewBox="0 0 200 200" 
xmlns="http://www.w3.0rg/2000/svg"> 
<g id="square"> 
<rect x="0" y="0" width="20" height="20" 
style="fill: black; stroke-width: 2;"/> 





</g> 
<use xlink:href="#square" x="50" y="50"/> 
</svg> 


58 














6-1: 使 用 <use> 移动 正方 形 


事实 上 ，x 和 y 值 只 是 更 常用 和 更 强大 的 transforn 属性 的 一 种 简写 形式 。 具 体 来 说 ，x 和 
y 相当 于 属性 transform="translate(x-value，y-value)"， 而 translate 只 是 一 个 花哨 的 表 
示 “ 移 动 ” 的 术语 。x 和 y 根据 当前 用 户 坐 标 系统 计算 。 让 我 们 使 用 transform 生成 另 一 
个 正方 形 ， 它 的 左上 角 位 于 (50, 50) 处 。 示 例 6-2 列 出 了 SVG 代码 。 














示例 6-2: 用 translate 移动 坐标 系统 


<svg width="200px" height="200px" viewBox="0 0 200 200" 
xmlns="http://www.w3.o0rg/2000/svg"> 
<g id="square"> 
<rect x="0" y="0" width="20" height="20" 
style="fill: none; stroke:black; stroke-width: 2;"/> 

</g> 

<use xlink:href="#square" transform="translate(50,50)"/> 
</svg> 














结果 看 起 来 和 图 6-1 完全 一 样 。 你 可 能 认为 它 是 像 图 6-2 那样 通过 移动 正方 形 到 网 格 的 另 
一 个 地 方 完成 的 ， 但 其 实 并 不 是 这 样 。 

















图 6-2: 移动 看 起 来 是 如 何 工作 的 (但 实际 上 不 是 ) 


实际 上 完全 不 同 。translate 声明 会 获取 整个 网 格 ， 然 后 把 它 移动 到 画布 的 新 位 置 ， 而 不 
是 移动 正方 形 。 就 正方 形 而 言 ， 它 仍然 绘制 在 左上 角 (0, 0) 处 ， 如 图 6-3 所 示 。 
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6-3: transtLate 的 移动 原理 
在 线 示例 允许 我 们 堂 试 不 同 的 坐标 : 


http://oreillymedia.github.io/svg-essentials-examples/chO6/translate.html 





变换 永远 不 会 改变 图 形 对 象 的 网 格 坐 标 ， 但 是 它 会 改变 网 格 在 画布 上 的 
位 置 。 








乍 看 之 下 ， 使 用 transtate 似乎 序 刻 且 低 效 ， 如 同 通 过 移动 整个 起 居室 、 墙 壁 以 及 所 有 和 东 
西 到 新 的 位 置 ， 从 而 让 沙发 远离 房子 的 外 墙 。 事实 上 ， 如 果 transtation 是 唯一 可 用 的 变 
换 ， 那 么 移动 整个 坐标 系统 将 是 一 种 浪费 。 但 是 ， 我 们 很 快 会 看 到 ， 如 果 要 对 整个 坐标 系 
统 应 用 其 他 的 变换 或 者 一 系列 变换 的 组 合 ， 那 么 从 数学 和 概念 上 讲 ， 这 样 做 会 更 方便 。 






































6.2 scale 变 


它 可 以 通过 缩放 坐标 系统 的 方式 让 对 象 显示 得 比 定义 的 尺寸 更 大 或 者 更 小 。 这 种 变换 被 指 
定 为 如 下 形式 : 





。 transform="scale(value)" 


所 有 的 x 和 ?坐标 乘 以 给 定 的 value。 


。 transform="scale(x-value, y-value)" 


所 有 x 坐标 乘 以 给 定 的 x-vaLue， 所 有 ? 坐标 乘 以 给 定 的 y-value。 





示例 6-3 是 第 一 类 缩放 变换 的 例子 ， 均 匀 地 将 两 个 轴 放 大 一 倍 。 再 次 声明 ， 图 6-4 中 的 虚 
线 并 非 SVG 的 一 部 分 ， 它 们 只 是 显示 我 们 所 感 兴趣 的 画布 区 域 。 注 意 正 方形 的 左上 和 角 在 
(10, 10) 位 置 。 

















示例 6-3: 均匀 地 缩放 图 形 


http://oreillymedia.github.io/sve-essentials-examples/ch06/scale.html 





<svg width="200px" height="200px" viewBox="0 0 200 200" 
xmlns="http://www.w3.o0rg/2000/svg"> 
<g id="square"> 
<rect x="10" y="10" width="20" height="20" 
style="fill: none; stroke: black;"/> 

</g> 

<use xlink:href="#square" transform="scale(2)"/> 
</svg> 














图 6-4: 缩放 变换 的 结 


你 可 能 会 想 :“ 等 等 ， 我 可 以 理解 为 什么 正方 形变 大 了 。 但 是 这 里 并 设 使 用 transtate， 为 
什么 正方 形 在 不 同 的 位 置 了 呢 ? ”让 我 们 看 看 图 6-5 到 底 发 生 了 什么 ， 一 切 就 会 变 得 清晰 。 
网 格 并 没有 被 移动 ， 坐 标 系统 的 点 (0, 0) 仍然 在 相同 的 位 置 ， 但 是 每 个 用 户 坐 标 都 变 成 原 
来 的 两 倍 了 。 从 网 格 线 上 可 以 看 到 ， 和 矩形 的 左上 角 在 更 大 的 新 网 格 中 仍然 在 (10, 10) 位 置 ， 
因为 对 象 并 没有 移动 。 这 也 解释 了 为 什么 较 大 正方 形 的 轮廓 线 更 粗 了 。stroke-width 仍然 
是 一 个 用 户 单位 ， 但 是 这 个 单位 已 经 是 原来 的 两 倍 了， 因此 其 笔画 变 粗 了 。 
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图 6-5: scale 变换 的 工作 原理 














度 ， 但 是 ， 它 会 


训 


缩放 变换 永远 不 会 改变 图 形 对 象 的 网 格 坐 标 或 者 它 的 笔画 
改变 对 应 画布 上 的 坐标 系统 (网 格 ) 的 大 小 。 








我 们 可 以 通过 使 用 scale 变换 的 第 二 种 形式 ， 为 坐标 系统 的 x 轴 和 ?了 轴 指 定 不 同 的 缩放 比 
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例 。 示 例 6-4 绘制 的 正方 形 的 x 轴 被 放大 了 3 倍 , y 轴 被 放大 了 1.5 倍 。 正 如 在 图 6-6 中 可 
以 看 到 的 ， 一 个 单位 的 笔画 宽度 也 被 不 均匀 地 缩放 了 。 


示例 6-4: 不 均匀 地 缩放 图 形 

<svg width="200px" height="200px" viewBox="0 0 200 200" 
xmlns="http://www.w3.0rg/2000/svg"> 
<g id="square"> 

<rect x="10" y="10" width="20" height="20" 
style="fill: none; stroke: black;"/> 

</g> 
<use xlink:href="#square" transform="scale(3, 1.5)"/> 


</svg> 
生 _] 




















图 6-6; 不 均匀 地 缩放 变换 的 结果 


到 目前 为 止 ， 所 有 示例 都 只 对 <use> 元 素 应 用 了 transforn 属性 。 我 们 可 以 将 一 系列 元 素 
组 合 在 一 起 ， 然 后 对 组 合 应 用 变换 : 

<g id="group1" transform="translate(3, 5)"> 

<Line x1="10" y1="10" x2="30" y2="30"/> 

<circle cx="20" cy="20" r="10"/> 

</g> 
我 们 也 可 以 为 单个 对 象 或 者 基本 形状 应 用 变换 。 比 如 ， 这 里 有 一 个 矩形 ， 其 坐标 系统 被 放 
大 了 3 倍 : 

















<rect x="15" y="20" width="10" height="5" 
transform="scale(3)" 
style="fill: none; stroke: black;"/> 


很 明显 ， 缩 放 后 矩形 的 宽度 和 高 度 应 该 是 未 缩放 秆 形 的 3 倍 。 然 而 ， 你 可 能 想 知 道 x 坐标 
和 ?坐标 的 值 是 在 抑 形 被 缩放 前 还 是 缩放 后 计算 的 。 答 案 是 SVG 会 在 计算 形状 的 坐标 之 
前 ， 先 对 坐标 系统 应 用 变换 。 示 例 6-5 是 被 缩放 的 怎 形 的 SVG， 图 6-7 上 的 网 格 线 是 在 坐 
标 系统 缩放 前 绘制 的 。 


示例 6-5: 单个 图 形 对 象 的 变换 
<!-- 未 缩放 坐标 系统 的 网 格 参考 线 - -> 
<Line x1="0" y1="0" x2="100" y2="0" style="stroke: black;"/> 
<Line x1="0" y1="0" x2="0" y2="100" style="stroke: black;"/> 
<line x1="45" y1="0" x2="45" y2="100" style="stroke: gray;"/> 
<line x1="0" y1="60" x2="100" y2="60" style="stroke: gray;"/> 














<!-- 要 变换 的 矩形 --> 

<rect x="15" y="20" width="10" height="5" 
transform="scale(3)" 
style="fill: none; stroke: black;"/> 




















图 6-7: 单个 图 形变 换 的 结果 


为 形状 应 用 变换 与 形状 被 包含 在 变换 组 合 中 的 效果 相同 。 在 前 面 的 例子 中 ， 
被 缩放 的 矩形 等 价 于 这 个 SVG: 








<g transform="scale(3)"> 
<rect x="15" y="20" width="10" height="5" 
style="fill: none; stroke: black;"/> 
</g> 


6.3 变换 序列 


一 个 图 形 对 象 上 可 以 做 多 个 变换 。 我 们 只 需 将 多 个 变换 通过 空格 或 逗号 分 隔 ， 依 次 放 入 
transfornm 属性 即 可 。 下 面 是 一 矩形 ， 它 经 过 了 两 个 变换 ， 先 平移 再 缩放 〈 通 过 绘制 的 轴 
可 以 看 出 来 矩形 确实 被 移动 了 )。 

<!-- 绘制 轴 --> 


<Line x1="0" y1="0" x2="0" y2="100" style="stroke: gray;"/> 
<Line x1="0" y1="0" x2="100" y2="0" style="stroke: gray;"/> 











<rect x="10" y="10" height="15" width="20" 
transform="translate(30, 20) scale(2)" 
style="fill: gray;"/> 


这 个 例子 等 价 于 下 面 的 戏 套 组 合 序 列 ， 这 两 个 例子 都 会 生成 如 图 6-8 所 示 的 结果 。 


<g transform="translate(30, 20)"> 
<g transform="scale(2)"> 
<rect x="10" y="10" height="15" width="20" 
style="fill: gray;"/> 
</g> 
</g> 














图 6-8: 先 平移 后 缩放 的 结果 
图 6-9 展示 了 每 个 变换 阶段 发 生 了 什么 。 
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图 6-9; 先 平移 后 缩放 的 工作 原理 





变换 序列 的 顺序 会 影响 结果 。 一 般 情况 下 ， 变 换 A 然后 变换 B 的 结果 与 变换 
B 然后 变换 A 的 结果 不 同 。 





示例 6-6 绘制 了 与 前 面 例子 相同 的 灰色 矩形。 然后 又 绘制 了 一 个 黑色 矩形， 但 是 这 次 
scale 在 transtate 之 前 。 从 图 6-10 所 示 的 结果 中 可 以 看 到 ， 秆 形 最 终 在 画布 的 不 同位 置 。 


示例 6-6: 变换 序列 一 一 先 缩放 后 平移 
<!-- 绘制 轴 --> 
<Line x1="0" y1="0" x2="0" y2="100" style="stroke: gray;"/> 
<Line x1="0" y1="0" x2="100" y2="0" style="stroke: gray;"/> 


<rect x="10" y="10" width="20" height="15" 
transform="translate(30, 20) scale(2)" style="fill: gray;"/> 


<rect x="10" y="10" width="20" height="15" 
transform="scale(2) translate(30, 20)" 
style="fill: black;"/> 





Te 











图 6-10; 先 缩放 后 平移 的 结果 


黑色 矩形 最 终 远 离 原 始 和 矩形 是 因为 首先 应 用 了 缩放 ， 因 此 横向 平移 20 单位 和 纵向 平移 10 
单位 是 在 单位 放大 一 倍 之 后 完成 的 ， 如 图 6-11 所 示 。 

















40 





scale(2) translate(30, 20) 


图 6-11: 先 缩放 后 平移 的 工作 原理 





在 在 线 示 例 中 ， 我 们 可 以 尝试 任意 的 变换 序列 ， 然 后 比较 原始 矩形 和 变换 后 的 矩形 : 





http://oreillymedia.github.io/svg-essentials-examples/ch06/sequence.html 


6.4 技巧: 笛 卡 儿 坐 标 系统 转换 

如 果 从 其 他 系统 传输 数据 到 SVG， 你 可 能 必须 处 理 使 用 第 卡 儿 坐 标 (在 高 中 代数 中 学 到 
的 ) 表示 数据 的 矢量 图 形 。 在 这 个 系统 中 ， 点 (0, 0) 位 于 画布 的 左下 角 , y 坐标 向 上 递增 。 
图 6-12 展示 了 使 用 笛 卡 儿 坐 标 绘制 的 梯形 的 坐标 。 
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图 6-12: 使 用 第 卡 儿 坐 标 绘制 的 梯形 


》 轴 与 SVG 的 默认 约定 “上 下 相反 "， 因 此 需要 重新 计算 坐标 。 我 们 可 以 使 用 变换 序列 让 
SVG 做 这 些 工 作 ， 而 不 是 手动 处 理 。 首 先 ， 平 移 图 像 到 SVG 中 ， 甚 坐标 如 示例 6-7 所 示 
(这 个 例子 还 包括 轴 作 为 参考 ) 。 如 我 们 所 料 ， 图 像 会 上 下 翻转 。 注 意 ， 图 6-13 并 不 是 从 左 
向 右 翻 转 ， 因 为 x 轴 的 方向 在 笛 卡 儿 坐 标 和 默认 SVG 坐标 系统 中 的 方向 相同 。 


示例 6-7: 直接 使 用 笛 卡 儿 坐 标 
<svg width="200px" height="200px" viewBox="0 0 200 200" 
xmlns="http://www.w3.o0rg/2000/svg"> 
<!-- 轴 --> 
<line x1="0" y1="0" x2="100" y2="0" style="stroke: black;"/> 
<Line x1="0" y1="0" x2="0" y2="100" style="stroke: black;"/> 


























<!-- 梯形 --> 
<polygon points="40 40, 100 40, 70 70, 40 70" 
style="fill: gray; stroke: black;"/> 
</svg> 
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要 


6-13: 使 用 原始 第 卡 儿 坐标 的 结果 








把 图 片 翻转 回 正面 朝 上 ， 我 们 可 以 利用 这 一 事实 : 通过 负 值 缩放 形状 会 反 转 坐标 顺序 。 


人 玫 个 网 格 最 终 会 翻转 到 坐标 0 点 的 另 一 侧 ， 我 们 还 需要 将 形状 平移 回 画 布 的 可 


视 部 


(1 
(2 
(3 
(4 





。 这 一 转换 遵循 以 下 步骤 。 
在 原始 绘 


丽 





) 中 找到 最 大 y 坐标 。 在 本 例 中 是 100， 也 就 是 原始 y 轴 的 末端 。 

) 将 整个 绘图 放 入 <g> 元 素 中 。 

) 启用 平移 ， 根 据 最 大 y 值 向 下 移动 坐标 系统 : transform=”translate(0, max-y)”。 

) 接 下 来 的 变换 就 是 缩放 y 轴 -1 倍 ， og transform=” translate(0, max-y) 
scale(1, -1)”, 














我 们 并 不 希望 改变 x 轴 的 值 ， 但 是 仍然 需要 为 translate 和 scale 函数 指定 
一 个 x 值 。 什 么 都 不 做 的 平移 ， 指 定 0 即 可 ， 但 是 什么 都 不 做 的 缩放 ， 要 变 
换 值 为 1， 因 为 坐标 会 乘 以 缩放 比例 。scate(9) 变换 会 将 形状 折 释 为 一 个 点 
(因为 每 个 坐标 乘 以 0 将 变 成 0)。 


























示例 6-8 使 用 了 这 种 变换 ， 生 成 了 如 图 6-14 所 示 的 正面 朝 上 的 梯形 。 
示例 6-8: 笛 卡 儿 和 坐标 变换 




















<svg width="200px" height="200px" viewBox="0 0 200 200" 
xmlns="http://www.w3.0rg/2000/svg"> 
<g transform="translate(0,100) scale(1,-1)"> 
!-- 轴 --> 
<Line x1="0" y1="0" x2="100" y2="0" style="stroke: black;"/> 
<Line x1="0" y1="0" x2="0" y2="100" style="stroke: black;"/> 


<!-- 梯形 --> 
<polygon points="40 40, 100 40, 70 70, 40 70" 
style="fill: gray; stroke: black;"/> 
</g> 
</svg> 














6-14: 笛 卡 儿 坐标 变换 








6.5 rotate 变 


还 可 以 根据 指定 的 角度 旋转 坐标 系统 。 在 默认 的 坐标 系统 中 ， 角 度 的 测量 是 按 顺 时 针 增 加 
的 ， 水 平 线 的 角度 为 0 度 ， 如 图 6-15 所 示 。 


























270" 
225, 315° 
180° 0" 
135° 45° 
90° 
图 6-15; 默认 角度 测量 
除非 我 们 另行 指定 ， 否 则 旋转 的 中 心 点 ( 轴 心 点 的 别称 ) 被 假定 为 (0, 0)。 示 例 6-9 绘制 了 


一 个 灰色 的 正方 形 ， 然 后 在 坐标 系统 旋转 45 度 后 又 绘制 了 一 个 的 黑色 正方 形 。 轴 仍然 用 
作 参 萎 。 图 6-16 展示 了 结果 。 如 有 果 你 发 现 正方 形 的 位 置 似 乎 也 移动 了 ， 请 不 要 感到 惊讶 。 
记 住 ， 如 图 6-17 所 示 ， 被 旋转 的 是 整个 坐标 系统 。 

示例 6-9: 围绕 原点 旋转 
http://oreillymedia.github.io/svg-essentials-examples/ch0O6/rotate.html 




















<!-- 轴 --> 
<polyline points="100 0, 0 0, © 100" style="stroke: black; fill: none;"/> 











<!-- 默认 和 旋转 后 的 正方 形 --> 

<rect x="70" y="30" width="20" height="20" style="fill: gray;"/> 

<rect x="70" y="30" width="20" height="20" 
transform="rotate(45)" style="fill: black;"/> 








图 
令 











图 6-16: 围绕 原点 旋转 的 结果 











注 1: 本 章 所 有 示意 图 都 是 静态 图 片 。 这 幅 图 显示 了 两 个 正方 形 (一 个 旋转 过 ， 另 一 个 没有 )。 展 示 旋 转正 
方形 动画 要 使 用 ， 我 们 将 会 在 12.9 市 讨 论 。 
































坐标 系统 变换 | 67 





0 0 oo 40 60 80 100 
bl 吃 ， 











图 6-17: 围绕 原点 旋转 的 工作 原理 


很 多 时 候 ， 我 们 并 不 想 围绕 原点 旋转 副 个 坐标 系统 ， 而 是 希望 围绕 某 个 点 旋转 单个 对 
象 。 我 们 可 以 通过 一 系列 变换 做 到 这 一 点 : transLate(centerX， centerY) rotate(angle) 
translate(-centerX， -centerY)。SVG 提供 了 另 一 个 版 本 的 rotate， 让 处 理 这 一 常见 任务 
更 容易 。 在 rotate 变换 的 第 二 种 形式 中 ， 指 定 角 度 以 及 想 要 围绕 其 旋转 的 中 心 点 即 可 。 























rotate(angle, centerX, centeryY) 

















这 样 做 的 效果 是 以 指定 的 x 和 yy 点 作为 原点 临时 建立 一 个 新 的 坐标 系统 执行 旋转 操作 ， 然 
后 重新 建立 原始 坐标 。 示 例 6-10 展示 了 这 种 形式 的 旋转 (rotate) 创建 了 箭头 的 多 个 副 
本 ， 如 图 6-18 所 示 。 


示例 6-10: 围绕 中 心 点 旋转 


htip://oreillymedia.github.io/svg-essentials-examples/ch0O6/rotate-center.html 























<!-- 旋转 中 心 --> 
<circle cx="50" cy="50" r="3" style="fill: black;"/> 


<!-- 未 旋转 的 箭头 --> 
<g id="arrow" style="stroke: black;"> 
<Line x1="60" y1="50" x2="90" y2="50"/> 
<polygon points="90 50, 85 45, 85 55"/> 
</g> 


<!-- 围绕 中 心 点 旋转 - -> 

<use xlink:href="#arrow" transform="rotate(60, 50, 50)"/> 
<use xlink:href="#arrow" transform="rotate(-90, 50, 50)"/> 
<use xlink:href="#arrow" transform="rotate(-150, 50 50)"/> 





< 


y 











图 6-18; 围绕 中 心 点 旋转 的 结果 





6.6 技巧: 围绕 中 心 点 缩放 

虽然 可 以 围绕 某 个 不 是 原点 的 点 旋转 ， 但 是 却 不 能 围绕 某 个 点 缩放 (scale)。 然 而 ,我们 
可 以 使 用 一 系列 简单 的 变换 制造 同心 符号 。 要 围绕 某 个 点 按照 给 定 的 比例 缩放 对 象 可 以 这 
么 做 : 









































translate(-centerX*(factor-1), -centery*(factor-1)) 
scale(l factor) 


你 可 能 还 希望 将 stroke-width 的 值 也 除 以 缩放 系数 ， 从 而 让 变 大 后 的 对 象 的 轮廓 保持 同样 
的 宽度 。 示 例 6-11 绘制 了 一 系列 同心 矩形 ， 如 图 6-19 所 示 。? 


示例 6-11: 围绕 中 心 点 缩放 


Py 缩放 中 心 - -> 
<circle cx="50" cy="50" r="2" style="fill: black;"/> 


<!-- 未 缩放 的 矩形 - -> 

<g id="box" style="stroke: black; fill: none; "> 
<rect x="35" y="40" width="30" height="20"/> 

</g> 








<use xlink:href="#box" transform="translate(-50, -50) scale(2)" 
style="stroke-width: 0.5;"/> 

<use xlink:href="#box" transform="translate(-75, -75) scale(2.5)" 
style="stroke-width: 0.4;"/> 

<use xlink:href="#box" transform="translate(-100, -100) scale(3)" 


style="stroke-width: 0.33;"/> 


























6-19: 围绕 中 心 点 缩放 的 结 


6.7 skewX 和 skewY 变 换 


SVG 还 有 另外 两 种 变换 skewX 和 skewY， 这 让 我 们 可 以 倾斜 某 个 轴 。 基 一般 形式 为 
skewX(angle) 和 skewY(angle)。skewX 变换 会 按照 指定 的 角度 “推动 ”所 有 x 坐标 ，y 坐 
标 不 会 改变 。skewyY 会 倾斜 y 坐标 ， 而 x 坐标 不 会 改变 ， 如 图 6-20， 由 示例 6-12 中 的 代码 
绘制 。 























注 2: 这 也 是 静态 图 片 ,是 一 个 “方形 又 心 ”。 如 果 想 要 展示 扩展 正方 形 的 动画 ,要 使 用 ,我 们 将 会 在 12.9 节 讨论 。 
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示例 6-12: skewX 和 skewY 
http://oreillymedia.github.io/sve-essentials-examples/ch06/skew.html 


<!-- 参考 线 --> @ 
<g style="stroke: gray; stroke-dasharray: 4 4;"> 
<Line x1="0" y1="0" x2="200" y2="0"/> 
<line x1="20" y1="0" x2="20" y2="90"/> 
<line x1="120" y1="0" x2="120" y2="90"/> 
</g> 


<g transform="translate(20, 0)"> © 
<g transform="skewX(30)"> © 
<polyline points="50 0, 0 0, 0 50" @ 
style="fill: none; stroke: black; stroke-width: 2;"/> 
<text x="0" y="60">skewX</text> 日 
</g> 
</g> 


<g transform="translate(120, 0)"> @ 
<g transform="skewX(30)"> 
<polyline points="50 0, 0 0, 0 50" 
style="fill: none; stroke: black; stroke-width: 2;"/> 
<text x="0" y="60">skewX</text> 
</g> 
</g> 


@ 执行 变换 前 这 些 虚线 绘制 在 默认 坐标 系统 中 。 
加 将 整个 倾斜 “打包 ”移动 到 希望 的 位 置 。 

四 倾斜 x 坐标 30 度 。 这 一 变换 不 会 改变 原点 ， 新 坐标 系统 中 原点 仍然 在 (0, 0) 处 。 
@ 方便 起 见 ， 在 原点 绘制 对 象 。 

@ 第 9 章 会 详细 介绍 文本 。 

@ 这 些 元 素 的 组 织 方 式 与 前 面 的 元 素 一 样 ， 只 是 y 








[之 





标 被 倾斜 了 。 














6-20: skewX 和 skewy 变换 的 结果 


注意 ，skewX 保持 水 平 线 不 变 ，skewY 则 保持 垂直 线 不 动 。 想 想 为 什么 吧 。 


6.8 变换 总 结 
表 6-1 总 结 了 可 用 于 SVG 中 的 变换 。 





表 6-1: SVG 变换 










































































































































































变 换 描 述 

translate(x, y) 按照 指定 的 x 和 ?y 值 移动 用 户 坐 标 系统 。 注 意 : 如 果 没 有 指定 y 值 ， 
则 假定 为 0 

scale(xFactor, yFactor) 使 用 指定 的 xFactor 和 yFactor 乘 以 所 有 的 用 户 坐 标 系统 。 比 例 值 可 
以 是 小 数 或 者 负 值 

scale(factor) 和 scale(factor，factor) 相同 

rotate(angte) 按照 指定 的 angte 旋转 用 户 坐 标 。 旋 转 中 心 为 原点 (0, 0。 在 默认 坐标 
系统 中 ， 旋 转角 度 按 顺 时 针 方向 递增 ， 水 平 线 的 角度 为 0 度 

rotate(angLe，centerX，centerY) ”按照 指定 的 angle 旋转 用 户 坐 标 。 旋 转 中 心 由 centerX 和 centery 指定 

skewX(angle) 根据 指定 的 angle 倾斜 所 有 x 坐标。 从 视觉 上 讲 ， 这 会 让 垂直 线 出 现 
角度 

skewY(angle) 根据 指定 的 angle 倾斜 所 有 yy 坐标。 从 视觉 上 讲 ， 这 会 让 水 平 线 出 现 
角度 

matrix(a b cdef) 间 定 一 个 六 个 值 组 成 的 矩阵 变换 ， 参 考 附 录 D 


6.9 CSS 变 换 和 SVG 

在 编写 本 文 时 ，CSS 变换 模块 还 处 在 草案 阶段 (http:Wwww.w3.org/TR/css-transforms-1/) 。 
由 于 它 还 是 一 个 草案 ， 所 以 其 细节 可 能 还 会 改变 ， 并 且 训 览 右 的 支持 情况 也 可 能 不 同 。 如 
果 你 已 经 在 使 用 CSS 变换 了 ， 以 下 是 一 些 与 SVG 的 重要 区 别 。 











。 SVG1.1 变换 使 用 用 户 单位 和 隐 式 角度 。 尽管 CSS 规范 中 规定 当 应 用 于 SVG 元 素 时 允 
许 使 用 隐 式 用 户 单位 ， 但 CSS 变换 中 仍然 需要 使 用 CSS 长 度 并 需要 指定 角度 单位 。 

。 SVG1.1 变 换 是 结构 型 属性 ,而 CSS 变换 可 以 指定 在 样式 表 中 。 样 式 表 声 明 会 覆盖 属性 值 。 

。 在 CSS 中 ， 变 换 类 型 和 左 括号 之 间 不 能 有 空格 ， 并 且 必 须 使 用 逗号 分 隔 数 字 值 。 

。 CSS 变换 包含 一 个 单独 的 属性 来 指定 旋转 和 缩放 的 原点 。 在 SVG 中 ， 旋 转 原点 只 是 
rotate() 国 数 的 一 部 分 ， 并 且 我 们 不 能 为 缩放 指定 原点 。 

。 CSS 变换 还 包含 3D 效果 。 




















注 3: 指 SVG 变换 中 不 需要 指定 角度 单位 ， 默 认 单位 为 “角度 ”。 译 者 注 
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第 4 章 中 描述 过 ， 所 有 基本 形状 都 是 <path> 元 素 的 简写 形式 。 建 议 使 用 这 些 简写 形式 ， 因 
为 它们 让 SVG 更 可 读 ， 更 加 结构 化 。<path> 元 素 则 更 通用 ， 它 通过 指定 一 系列 相互 连接 
的 线 、 圆 弧 和 曲线 绘制 任意 形状 的 轮廓 。 这 些 形 状 轮廓 也 像 基本 形状 一 样 可 以 填充 颜色 或 
者 绘制 轮廓 线 。 此 外 ， 路 径 〈 以 及 简写 形式 的 基本 形状 ) 还 可 以 用 来 定义 裁剪 区 域 或 者 透 
明 遮 曾 的 轮廓 ， 第 10 章 会 有 相关 内 容 介绍 。 


所 有 描述 轮廓 的 数据 都 放 在 <path> 元 素 的 d 属性 中 〈d 是 data 的 缩写 ) 。 路 径 数据 包括 单 
个 字符 的 命令 ， 比 如 表示 moveto,， 上 表示 Lineto， 接 着 是 该 命令 的 坐标 信息 。 











7.1 moveto、Lineto 和 cLosepath 
每 个 路 径 都 必须 以 moveto 命令 开始 。 


命令 字母 为 大 写 的 册 ， 紧 跟着 一 个 使 用 逗号 或 空格 分 隔 的 x 和 ?了 坐标。 这 个 命令 用 来 设置 
绘制 轮廓 的 “ 笔 ” 的 当前 位 置 。 





moveto 命令 后 面 紧 跟 着 一 个 或 多 个 Lineto 命令 ， 用 大 写 L 表示 ， 它 的 后 面 也 是 由 逗号 或 空 
格 分 隔 的 x 和 yy 坐标。 示例 7-1 中 有 三 个 路 径 。 第 一 个 绘制 了 一 条 线 ， 第 二 个 绘制 了 一 个 
直角 ， 第 三 个 绘制 了 两 个 30 度 的 角 。 当 我 们 使 用 另 一 个 moveto 命令 “重新 启用 ”画笔 时 ， 
会 开始 一 条 新 的 子路 径 。 我 们 可 以 使 用 逗号 或 者 空格 分 隔 x 和 yy 坐标 ， 正 如 示例 中 三 个 路 
径 所 示 。 结 果 如 图 7-1 所 示 。 
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示例 7-1: 使 用 moveto 和 Lineto 


http://oreillymedia.github.io/svg-essentials-examples/ch07/moveto-lineto.html 


<svg width="150px" height="150px" viewBox="0 0 150 150" 


xmlns="http://www.w3.o0rg/2000/svg"> 


<g style="stroke: black; fill: none;"> 





<!-- 一 条 线 --> 
<path d="M 10 10 L 100 10"/> 
<!-- 一 个 直角 --> 

















<path d="M 10, 20 L 100, 20 L 100,50"/> 


<!-- 两 个 30 度 角 --> 


<path d="M 40 60 L 10, 60 L 40 42.68 


M60, 60 L 90 60 L 60, 42.68"/> 
</g> 
</svg> 








二 和 二 





7-1:; 使 用 moveto 和 Lineto 的 结果 


Le 


仔细 观察 最 后 一 个 路 径 ， 它 使 用 了 过 












































号 而 不 是 空格 来 分 隔 坐 标 。 

值 作 用 

M 40 60 移动 画笔 到 (40, 60) 

L 10 60 绘制 一 条 线 到 (10, 60) 

L 40 42.68 绘制 一 条 线 到 (40, 42.68) 

M 60 60 启动 一 个 新 的 子路 径 ， 移 动画 笔 到 (60, 60) 一 一 不 会 绘制 线条 

L 90 60 绘制 一 条 线 到 (90, 60) 

L 60 42.68 绘制 一 条 线 到 (60, 42.68) 
你 可 能 注意 到 了 ， 路 径 数 据 和 典型 的 XML 属性 值 看 起 来 不 是 很 像 。 因 为 整 
个 路 径 数据 包含 在 一 个 属性 中 ， 而 非 每 个 点 或 线段 都 是 一 个 独立 的 元 素 ， 所 
以 当 使 用 XML 解析 器 读 取 DOM 结构 时 ， 路 径 占 用 的 内 存 更 少 。 此 外 ， 紧 
凑 的 路 径 表 示 法 在 传播 复杂 的 图 形 时 不 会 占用 大 量 的 带宽 。 

如 果 想 用 <path> 绘制 矩形 ， 可 以 采用 绘制 四 条 线 的 方式 ， 也 可 以 先 绘制 三 条 线 ， 然 后 使 用 





用 大 写 Z 表 示 的 closepath 命令 绘 


如 图 7-2 所 示 ， 它 展示 了 绘制 所 有 的 边线 构 





制 一 条 直线 回 到 当前 子路 径 的 起 点 。 示 例 7-2 中 的 SVG 


成 的 矩形 、 使 用 cLosepath 绘制 的 矩形 ， 以 及 


一 个 通过 开启 和 闲 合 两 个 子路 径 绘制 两 个 三 角形 的 路 径 。 








示例 7-2: 使 用 cLosepath 


<g style="stroke: black; fill: none; "> 
<!-- 四 条 线形 式 的 矩形 - -> 
<path d="M 10, 10 L 40, 10 L 40, 30 L 10, 30 L 10, 10"/> 


<!-- closepath 绘 制 的 矩形 --> 
<path d="M 60 10 L 90 10 L 90 30 L 60 30 Z"/> 


<!-- 两 个 30 度 角 --> 
<path d="M 40 60 L 10 60 L 40 42.68 Z 
M60 60 L190 60 1 60 42.68 7"/> 


</g> 


仔细 观察 一 下 最 后 一 个 路 径 。 


值 作 用 





M 
LL 
上 


Zz 
M 


40 60 移动 画笔 到 (40, 60) 
19 60 绘制 一 条 线 到 (10, 60) 
40 42.68 ”绘制 一 条 线 到 (40, 42.68) 
通过 绘制 一 条 直线 到 (40, 60) 来 关闭 路 径 并 启动 子路 径 
60 60 局 动 一 个 新 的 子路 径 ， 移 动画 笔 到 (60, 60) 一 一 不 会 绘制 线条 
90 60 绘制 一 条 线 到 (90, 60) 
60 42.68 ”绘制 一 条 线 到 (60, 42.68) 




















z 通过 绘制 一 条 直线 到 (60, 60) 来 关闭 路 径 并 启动 子路 径 
L CD 
-人 入 

图 7-2: 使 用 closepath 





使 用 四 条 线 绘制 矩形 和 使 用 closepath 命令 绘制 矩形 还 有 另外 一 个 区 别 。 当 关闭 路 径 时 ， 
开始 线 和 结束 线 会 被 连接 到 一 起 ， 形 成 一 个 有 样式 的 连续 形状 。 如 果 使 用 粗 笔画 或 者 设置 
stroke-linecap 以 及 stroke-linejoin 效果 ， 区 别 就 很 明显 了 。 示 例 7-3 使 用 了 一 个 较 大 的 
笔画 宽度 ， 图 7-3 展示 了 结果 ， 并 且 放 大 了 ， 以 使 区 别 清晰 可 见 。 





























示例 7-3: 独立 线条 与 closepath 


<g style="stroke: gray; stroke-width: 8; fill: none;"> 


<!-- 四 条 线形 式 的 矩形 --> 
<path d="M 10 10 L 40 10 L 40 30L1039L19 10"/> 





<!-- cLosepath 绘 制 的 矩形 --> 
<path d="M 60 10 L 90 10 L 90 30 L 60 30 Z"/> 
</g> 











图 7-3: 独立 线条 与 closepath 的 结果 











7.2 ”相对 moveto 和 Lineto 


前 面 的 命令 都 使 用 大 写字 母 表示 ， 并 且 坐 标 都 被 假定 为 绝对 坐标 。 如 果 使 用 小 写 命令 字 
有 母 ， 坐 标 会 被 解析 为 相对 于 当前 的 画笔 位 置 。 因 此 ， 下 面 两 个 路 径 是 相同 的 。 


<path d="M 10 10 L 20 10 L 20 30 M 40 40 L 55 35" 
style="stroke: black;"/> 

<path d="M10 10110 0l 020m2010115 -5" 
style="stroke: black;"/> 











二 


























如 果 使 用 小 写 m (moveto) 启动 路 径 ， 它 的 坐标 会 被 解析 为 绝对 位 置 ， 因 为 它 没有 参照 位 
置 来 计算 相对 位 置 。 本 章 中 所 有 其 他 命令 都 有 同样 的 大 小 写 差 别 。 大 写 命令 的 坐标 是 绝对 
的 ， 小 写 命令 的 坐标 是 相对 的 。 但 是 closepath 命令 没有 坐标 ， 它 的 大 小 写 形式 效果 相同 。 


pA sy 下 * 
7.3 路径 的 快捷 方式 
如 果 说 内 容 是 国王 ， 设 计 是 王后 ， 那 么 带宽 效率 就 是 让 王宫 平稳 运行 的 星 家 朝臣 。 由 于 任 
何 有 意义 的 给 图 都 包含 由 数 十 个 坐标 对 组 成 的 路 径 ， 所 以 <path> 元 素 有 一 些 快捷 方式 ， 允 
许 我 们 使 用 尽 可 能 少 的 字 节 来 描绘 路 径 。 















































7.3.1 水 平和 垂直 Lineto 命 令 


水 平 线 和 垂直 线 很 常用 ， 足 以 成 为 快捷 命令 。 路 径 可 以 使 用 H 命令 加 绝对 x 坐标 ， 或 者 h 
命令 加 相对 x 坐标 ， 来 指定 一 条 水 平 线 。 类 似 地 ， 垂 直线 可 以 使 用 V 命令 加 绝对 y 坐标 ， 
或 者 v 命令 加 相对 y 坐标 来 指定 。 


下 表 比 较 了 使 用 简写 方式 和 宛 长 方式 绘制 水 平和 垂直 线 。 














简写 形式 。 等 价 的 元 长 形式 ” 效 果 








H 20 L 20 current_y 绘制 一 条 到 绝对 位 置 (20，current_y) 的 线 
h 20 1 20 0 绘制 一 条 到 (current_x + 20,current_y) 的 线 
V 20 L current_x 20 绘制 一 条 到 绝对 位 置 (current_x,20) 的 线 
v 20 190 20 绘制 一 条 到 (current_x，current_y + 20) 的 线 

















因此 ， 下 面 的 路 径 绘 制 了 一 个 宽度 为 15 单位 、 高 度 为 25 单位 的 矩形 ， 并 且 其 左上 角 在 坐 
标 (12, 24) 处 。 


<path d="M 12 24 h 15 v 25 h -15 z"/> 





7.3.2 ”路 径 快 捷 方 式 表 示 法 


应 用 下 面 两 个 规则 ， 路 径 还 可 以 更 短 。 


。 可 以 在 上 或 者 1 后 面 放 多 组 坐标 ， 正 如 在 <poLyLine> 元 素 中 那样 。 下 面 六 个 路 径 都 绘 
制 了 如 图 7-4 所 示 的 菱形 ， 前 三 个 使 用 了 绝对 坐标 ， 后 三 个 使 用 了 相对 坐标 。 其 中 第 三 
个 和 第 六 个 中 有 一 个 值得 关注 的 点 一 一 如 果 在 moveto 后 面 放 置 多 对 坐标 ， 除 了 第 一 对 
坐标 外 ， 剩 下 的 坐标 都 会 被 假设 为 它们 跟 在 一 个 Lineto 后 面 。 





















































<g style="fill:none; stroke: black"> 
<path d="M 30 30 L 55 5 L 80 30 L 55 55 Z"/> 


<path d="M 30 30 L 55 5 80 30 55 55 Z"/> 
<path d="M 30 30 55 5 80 30 55 55 Z"/> 

<path d="m 30 30 1 25 -25 1 25 25 1 -25 25 z"/> 
<path d="m 30 30 1 25 -25 25 25 -25 25 z"/> 
<path d="m 30 30 25 -25 25 25 -25 25 z"/> 


</g> 














图 7-4: 使 用 路 径 绘 制 的 菱形 


。 所 有 不 必要 的 空白 都 可 以 消除 。 命 令 字母 后 面 不 需要 空白 ， 因 为 所 有 的 命令 都 是 一 个 字 
母 。 数 字 和 命令 之 间 不 需要 空白 ， 因 为 命令 字母 并 不 能 作为 数字 的 一 部 分 。 正 数 和 负数 
之 间 也 不 需要 空 折 ， 因 为 负数 的 前 村 减 号 并 不 能 作为 正 数 的 一 部 分 。 这 样 。 我 们 就 可 以 
进一步 缩短 前 面 列 出 的 第 三 个 和 第 六 个 路 径 : 











<path d="M30 30 55 5 80 30 55 55Z"/> 
<path d="m30 30 25-25 25 25-25 25z"/> 


消除 空白 规则 的 另 一 个 例子 是 ， 绘 制 一 个 宽度 为 15 个 单位 、 高 度 为 25 个 单位 ， 左 上 角 在 
坐标 (12, 24) 的 矩形 : 








<path d="M 12 24 h 15 v 25 h -15 z"/><!-- 原始 路 径 --> 
<path d="M12 24h15v25h-15z"/> <!-- 更 短 的 路 径 --> 


7.4 ”椭圆 弧 

绘制 直线 段 相对 简单 ， 因 为 路 径 上 的 两 个 点 就 唯一 确定 了 它们 之 间 的 线段 。 但 如 果 是 曲线 
的 话 ， 由 于 在 两 个 点 之 间 可 以 绘制 无 限 条 曲线 ， 因 此 我 们 必须 给 出 额外 信息 ， 以 在 它们 之 
间 绘 制 一 条 曲线 路 径 。 这 里 要 研究 的 最 简单 的 曲线 为 椭圆 绝 ， 也 就 是 绘制 一 个 连接 两 个 点 
























































注 1: 我 们 还 可 以 在 水 平 Lineto 和 垂直 Lineto 命令 后 面 放 置 多 个 坐标 值 , 但 只 在 使 用 线 标记 时 才 会 看 到 效果 ， 
目前 我 们 还 没 讨论 过 线 标记 。H 25 35 45 和 H 45 相同 ，v 11 13 15 和 v 39 相同 。 














的 椭圆 的 一 部 分 。 





尽管 弧 是 视觉 上 最 简单 的 曲线 ,但 是 指定 一 条 唯一 的 曲线 所 需要 的 信息 却 是 最 多 的 。 需 要 
指定 的 第 一 部 分 信息 是 点 所 在 椭圆 的 x 半径 和 yy 半径。 椭圆 的 范围 可 以 缩小 为 两 个 ， 正 如 
在 图 7-5 中 (a) 部 分 可 以 看 到 的 。 两 个 点 将 两 个 椭圆 划分 为 4 个 圆 踊 。 其 中 (b) 和 (c) 是 小 
于 180 度 的 弧 ，(d) 和 (e) 都 大 于 180 度 。 看 看 (b) 和 (c)， 你 会 发 现 它们 的 方向 不 同 ，(b) 
是 按照 负 角 度 增加 ( 逆 时 针 ) 方向 绘制 的 ，(c) 是 按照 正 角度 增加 ( 顺 时 针 ) 方向 绘制 的 。 
同样 的 关系 在 (d) 和 (e) 之 间 也 成 立 。 
































上 急 ， 这 还 并 设 有 唯一 确定 次 在 的 弧 ! 因为 并 没有 规定 说 椭圆 的 x 半径 必须 平行 于 x 轴 。 
7-5 中 的 (9 部 分 展示 了 两 个 点 和 它们 所 在 的 相对 于 x 轴 旋 转 了 30 度 的 椭圆 。 
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7-5: 椭圆 水 命令 


(图 7-5 改编 自 W3C SVG 规范 的 8.3.8 小 节 。) 





圆 弧 命令 以 字母 A〈 绝 对 坐标 的 缩写 ) 或 者 a (相对 坐标 的 缩写 ) 开始 ， 后 面 紧 跟 以 下 7 
个 参数 。 





。 点 所 在 椭圆 的 x 半径 和 y 半径 。 

。 椭圆 的 *x 轴 旋 转角 度 x-axis-rotation。 

。 large-arc-flag， 如 果 需 要 圆 弧 的 角度 小 于 180 度 ， 其 为 0， 如 果 需 要 圆 弧 的 角度 大 于 或 
等 于 180 度 ， 则 为 1。 

。 sweep-flag， 如 果 需 要 弧 以 负 角 度 绘制 则 为 0， 以 正 角 度 绘制 则 为 1。 

。 终点 的 x 坐标 和 yy 坐标 (起 点 由 最 后 一 个 绘制 的 点 或 者 最 后 一 个 moveto 命令 确定 )。 











下 面 的 路 径 绘制 了 图 7-5 中 (b) 到 (e) 部 分 的 椭圆 弧 : 














<path d="M 125,75 A100,50 0 0,0 225,125"/> <!-- b --> 
<path d="M 125,75 A100,50 0 0,1 225,125"/> <!-- C --> 
<path d="M 125,75 A100,50 0 1,0 225,125"/> <!-- d --> 
<path d="M 125,75 A100,50 0 1,1 225,125"/> <!-- e --> 


在 线 示 例 中 ， 你 可 以 尝试 所 有 圆 缴 参数 来 看 看 它们 的 作用 : 





http://oreillymedia.github.io/svg-essentials-examples/ch07/arc.html 

这 里 有 一 个 进一步 的 示例 ， 让 我 们 来 增强 一 下 示例 5-8 中 的 背景 ， 完 成 韩国 国旗 中 的 阴阳 
符号 。 示 例 7-4 中 用 <ellipse> 元 素 保 持 了 完整 的 椭圆 ， 还 用 路 径 创 建 了 所 需 的 半圆 。 结 
果 如 图 7-6 所 示 。 






































示例 7-4: 使 用 椭圆 弧 
<svg width="400px" height="300px" viewBox="0 0 400 300" 
xmlns="http://www.w3.o0rg/2000/svg"> 
<!-- 灰色 投影 --> 
<ellipse cx="154" cy="154" rx="150" ry="120" style="fill: #999999;"/> 





<!-- 浅 蓝 色 椭 加 --> 
<ellipse cx="152" cy="152" rx="150" ry="120" style="fill: #cceeff;"/> 














<!-- 浅 红 色 大 半圆 填充 符号 的 上 半 部 分 ,其 下 方 “ 浊 入 "符号 左下 方 的 浅 红 色 小 半圆 --> 
<path d="M 302 152 A 150 120, 0, 1, 0, 2 152 
A 75 60, 0, 1, 0, 152 152" style="fill: #ffcccc;"/> 




















<!-- 浅 蓝 色 小 半圆 ,填充 符号 右上 方 --> 
<path d="M 152 152 A 75 60, 0, 1, 1, 302 152" style="fill: #cceeff;"/> 
</svg> 























图 7-6: 使 用 椭圆 法 的 结果 


我 们 不 能 使 用 一 个 路 径 命 令 绘 制 一 个 完整 的 椭圆 ， 如 果 弧 形 的 起 点 和 终点 相 
同 ， 则 有 无 数 种 方式 定位 椭圆 。SVG 阅读 器 会 跳 过 这 样 的 圆 弧 命令 。 如 果 你 
引 定 的 椭圆 半径 大小， 导致 不 能 覆盖 起 点 和 终点 ， 则 SVG 阅读 器 会 扩大 椭 
圆 直 到 它 足 够 覆盖 起 点 和 终点 。 

















对 于 如 何 处 理 超出 范围 的 参数 ， 请 参考 弧 形 实现 说 明 规 范 (http://www.w3.org/ 
TR/SVG11/implnote.html#ArcImplementationNotes ) 。 




















7.5 ”从 其 他 弧 线 格式 转换 


你 可 能 疑惑 ， 为 什么 不 能 像 其 他 矢量 图 形 系统 那样 ， 通 过 给 椭圆 定义 一 个 中 心 点 、x 和 y 
半径 、 起 始 角度 和 绝 形 角度 ， 来 指定 一 个 踊 形 。 这 是 规范 中 一 个 简单 的 方法 ， 适 合 将 驳 形 
绘制 为 一 个 单一 的 对 象 。 了 矛盾 的 是 ， 这 也 正 是 SVG 选择 一 种 看 似 古 怪 的 方法 来 指定 弧 形 
的 原因 。 在 SVG 中 ， 弧 形 并 不 能 单独 存在 ， 它 要 成 为 线 和 曲线 连接 路 径 的 一 部 分 (比如 ， 
一 个 圆 角 和 矩形 就 是 由 一 系列 线 和 椭圆 弧 组 成 的 )。 因 此 ， 通 过 终点 指定 弧 形 是 合理 的 。 
































然而 ， 有 时候 我 们 想 要 一 个 独立 的 半圆 (或 者 更 准确 地 说 ， 半 个 椭圆 )。 假 设 有 一 个 按照 
如 下 方式 指定 的 椭圆: 











<ellipse cx="cx" cy="cy" rx="rx" ry="ry"/> 
下 面 是 绘制 四 种 可 能 的 半 个 椭圆 的 路 径 (括号 中 是 要 计算 的 代数 表达 式 ) : 


<!-- 北半球 --> 

<path d="M (cx - rx) cy 
Arxry011(cx + rx) cy"/> 

<!-- 南半球 --> 

<path d="M (cx - rx) cy 
Arxry010 (cx+ rx) cy"/> 

<!-- 东 半 球 --> 

<path d="M cx (cy - ry) 
Arxry0O11cx (cy+ ry)"/> 

<!-- 西半球 --> 

<path d="M cx (cy - ry) 
ArxryO010 cx (cy + ry)"/> 


有 时 使 我们 可 能 想 要 绘制 一 个 指定 了 中 心 和 角度 的 任意 弧 ， 并 且 想 要 将 它 转换 为 SVG 的 
终点 和 范围 格式 。 在 另外 一 些 情况 下 ， 还 可 能 希望 将 弧 形 由 SVG 格式 转换 为 中 点 和 角度 
格式 。 第 二 种 情况 的 数学 运算 相当 复杂 ， 详 细 信 息 可 查看 SVG 规范 。 在 附录 下 中 可 以 看 
到 这 些 转换 方式 的 JavaScript 版 本 。 


7.6 贝 塞 尔 曲线 


绝 形 的 特点 是 整洁 ， 也 能 达到 我 们 想 要 的 效果 ， 但 是 很 少 有 人 用 “优雅 ”这 个 词 来 形容 
它 。 如 果 想 要 优雅 ， 则 需要 使 用 通过 二 次 和 三 次 方程 绘图 生成 曲线 。 数 学 家 在 几 百 年 前 就 
知道 这 些 曲线 了 ， 但 是 绘制 它们 始终 是 一 个 计算 很 复杂 的 任务 。 法 国 汽车 制造 商 雷 诺 公司 
的 工程 师 皮 埃 尔 . 贝 塞 尔 和 雪铁龙 公司 的 物理 学 家 和 数学 家 Paul de Casteljau 改变 了 这 一 状 
况 ， 他 们 开发 并 推广 了 一 种 计算 更 简便 的 方式 来 生成 这 些 曲线 。 

如 果 你 用 过 Adobe Illustrator 这 类 绘图 程序 ， 可 以 通过 指定 两 个 点 以 及 移动 如 下 图 中 所 示 的 
“控制 柄 ”来 绘制 这 些 贝 塞 尔 曲线 。 控 制 柄 的 端点 称 为 控制 点 ， 因 为 它 控制 着 曲线 的 形状 。 
当 我 们 移动 控制 柄 时 ， 曲 线 以 一 种 在 外 行 看 来 非常 神秘 的 方式 变化 着 。Key Point 软件 公司 
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的 图 形 设 计 师 迈克 : 伍德 (Mike Woodburn)， 提 出 了 图 7-7 这 种 形象 地 表示 控制 点 和 曲线 
关系 的 方式 : 想象 一 下 线 是 由 柔性 金属 制造 的 。 控 制 点 内 部 是 一 个 磁铁 ， 与 控制 点 越 近 ， 
吸引 力 越 强 。 























图 7-7: 用 绘图 程序 绘制 贝 塞 尔 曲线 


另 一 种 形象 地 表示 控制 点 作用 的 方法 以 构造 曲线 的 de Casteljau 方法 为 基础 。 下 面 几 节 中 会 
使 用 这 种 方法 。 详 情 请 查看 介绍 得 非常 清晰 的 数学 部 分 (http://graphics.cs.ucdavis.edu/~joy/ 
ecs178/Unit-2-Notes/Divide-and-Conquer-Bezier-Curve.pdf) 。 

















7.6.1 二 次 贝 塞 尔 曲 线 

最 简单 的 贝 塞 尔 曲线 是 二 次 曲线 。 我 们 要 指定 起 点 、 终 点 和 控制 点 。 假 设 有 两 个 支柱 放 在 
线 的 两 个 端点 ， 这 两 个 支柱 的 交点 就 是 控制 点 。 拉 紧 两 个 支柱 中 点 的 是 一 根 橡皮 筋 。 其 中 
曲线 弯曲 的 地 方正 好 和 橡皮 筋 的 中 点 相连 。 如 图 7-8 所 示 。 


























图 7-8: 二 次 贝 塞 尔 曲线 


起 点 /终点 以 及 控制 点 之 间 的 线 与 曲线 的 起 点 /终点 成 切线 。 曲 线 首 先 沿 着 到 达 控 制 点 的 
线 ， 然 后 弯曲 到 达 中 点 ， 再 顺 着 “支柱 ” 线 的 方向 。 曲 线 最 终 从 控制 点 沿 着 线 向 上 滑动 到 
终点 。Adobe Illustrator 这 类 程序 只 会 展示 一 个 “支柱 ”。 下 次 使 用 这 类 程序 时 ， 可 以 在 心 
里 添加 第 二 个 支柱 ， 这 样 产生 的 曲线 就 不 那么 神秘 了 。 



































这 些 都 是 理论 ， 现 在 的 实际 问题 是 如 何在 SVG 中 生成 曲线 。 可 以 通过 在 <path> 数据 中 使 
用 Q 或 者 q 命令 指定 一 个 二 次 曲线 。 这 个 命令 后 面 紧 跟着 两 组 指定 控制 点 和 终点 的 坐标 。 
大 写 命令 意味 着 绝对 坐标 ， 小 写 命令 意味 着 相对 坐标 。 图 7-8 中 的 曲线 起 点 在 (30, 75)， 终 
点 在 (300, 120)， 控 制 点 在 (240, 30)， 指 定 在 如 下 所 示 的 SVG 中 。 





























<path d="M30 75 Q240 30, 300 120" style="stroke: black; fill: none;"/> 





在 线 示例 分 别 展 示 了 显示 和 隐藏 “支柱 ”的 结果 : 





http://oreillymedia.github.io/svg-essentials-examples/ch07/quadratic-bezier.html 








还 可 以 在 二 次 曲线 命令 后 面 指 定 多 组 坐标 。 这 会 生成 一 个 多 边 贝 塞 尔 曲线 。 假 设想 用 
<path> 绘制 一 条 en 会 制 一 条 到 
(200, 80) 且 控 制 点 在 (130, 65) 的 曲线 。 下 面 是 这 个 路 径 的 SVG 示例 ， 其 中 控制 点 坐标 加 
粗 了 。 结 果 如 图 7-9 左 半 部 分 所 示 ， 探 制 点 和 线 如 图 右 半 部 分 所 示 。 

















<path d="M30 100 Q 80 30, 100 100, 130 65, 200 80"/> 





Re 

















图 7-9: 多 边 二 次 贝 塞 尔 曲线 


你 可 能 心 想 :“ 哪 里 优雅 了 ? 该 曲线 是 凹凸 不 平 的 。 这 个 评价 是 正确 的 。 这 是 因为 曲线 相 
连接 并 不 意味 着 它们 在 一 起 会 很 好 看 。 这 也 是 为 什么 SVG 还 提供 了 流畅 的 二 次 曲线 命令 ， 
用 字母 T 表 示 ( 想 要 使 用 相对 坐标 ， 就 用 t)。 这 个 命令 后 面 紧 跟 的 是 曲线 的 下 一 个 端点 ，; 
如 规范 所 说 ， 控 制 点 会 自动 计算 ， 方 法 是 “使 新 的 控制 点 与 上 一 条 命令 中 的 控制 点 相对 于 
当前 点 中 心 对 称 ”。 


























从 数学 角度 来 讲 ， 新 的 控制 点 x2，y2 基于 上 一 条 线段 的 端点 x，y 和 上 一 个 
控制 点 x1，y1， 按 照 如 下 规则 计算 : 





x2 
y2 


2*x- x1 
2*Yy-yl 


x+ (x - x1) 
y+ (y - y1) 














下 面 是 一 条 从 (30, 100) 到 (100, 100)， 控 制 点 在 (80, 30)， 然 后 平滑 过 渡 到 (200, 80) 的 | 
线 。 图 7-10 的 左 半 部 分 展示 了 这 条 曲线 ， 右 半 部 分 展示 了 控制 点 。 虚 线 表 示 了 中 心 对 称 的 
控制 点 。 现 在 优雅 多 了 1 








<path d="M30 100 Q 80 30, 100 100 T 200 80"/> 


图 7-10: 平滑 的 多 边 二 次 贝 塞 尔 曲线 





























在 在 线 示 例 中 可 以 体验 多 边 二 次 贝 塞 尔 曲线 : 














http://oreillymedia.github.io/svg-essentials-examples/ch07/smooth-quadratic-bezier.html 


7.6.2 三 次 贝 塞 尔 曲线 


单个 二 次 贝 塞 尔 曲线 有 且 





只 有 一 个 顶点 ， 或 者 每 个 曲线 断 都 





只 有 一 个 凹 谷 。 虽 然 这 些 上 


由 线 














比 简 单 的 弧 线 更 有 用 ,但 是 用 三 次 贝 塞 尔 曲 线 可 以 做 得 更 好 ， 它 可 以 让 同一 个 曲线 图 形 内 





既 有 顶点 也 有 凹 谷 。 换 句 话 说， 三 次 曲线 可 以 包含 一 个 拐点 〈 曲 线 从 该 点 开始 从 一 个 方向 


往 另 一 个 方向 弯曲 )。 











二 次 曲线 和 三 次 曲线 之 间 的 区 别 是 三 次 | 
曲线 的 方式 与 生成 二 次 曲线 的 方式 类 似 。 从 
点 和 控制 点 (a)， 还 连接 了 它们 的 中 点 ， 生 成 两 条 线 (b)。 然 后 
1 线 上 的 一 个 点 。 注 意 曲 线 的 起 点 、 终 点 和 中 间 和 角度 都 与 控制 








线 (c)， 它 的 中 点 确定 了 最 终 


线 成 切线 (相交 )。 





















































1 线 有 两 个 控制 点 ， 每 个 端点 对 应 一 个 。 生 成 三 次 
图 7-11 中 可 以 看 到 ， 我 们 绘制 了 三 条 线 连接 端 
再 连接 (b) 的 中 点 生成 一 条 

















图 7-11: 三 次 贝 塞 尔 曲线 








要 指定 一 条 三 次 曲线 ， 使 用 5 或 者 < 命令 。 这 个 命令 后 面 紧 跟 三 组 坐标 ， 用 来 指定 起 点 的 
控制 点 、 终 点 的 控制 点 以 及 端点 。 和 其 他 所 有 路 径 命令 一 样 ， 大 写 命令 意味 着 绝对 坐标 ， 











小 写 命令 意味 着 相对 坐标 。 上 











和 (150, 60)。SVG 路 径 如 下 所 示 : 


<path d="M20 80 C 50 


20, 150 60, 200 120" 


style="stroke: black; fill: none;"/> 


根据 控制 点 的 关系 ， 还 可 以 绘制 很 多 有 趣 的 曲线 (参见 





只 展示 了 从 每 个 端点 到 它 控制 点 的 线条 。 


图 中 的 曲线 从 (20, 80) 到 (200, 120)， 控 制 点 分 别 在 (50, 20) 


图 7-12)。 为 了 让 图 形 整洁 ， 下 面 








a » 


M 40 50 C 10 10, 140 10, 110 50 M 40 50 C 60 10, 90 10, 110 50 M40 50C 110 10, 40 10, 110 50 





» al 








M 40 50 C 110 10, 40 10, 110 50 M 40 50 C 60 10, 90 90, 110 50 M 40 50 C 110 10, 40 90, 110 50 











图 7-12: 三 次 曲线 控制 点 组 合 的 结果 
可 以 在 在 线 示例 中 尝试 这 些 组 合 或 者 更 多 组 合 : 


http://oreillymedia.github.io/svg-essentials-examples/ch07/cubic-bezier.html 














和 二 次 曲线 一 样 ， 也 可 以 通过 在 三 次 曲线 命令 后 面 指 定 多 组 坐标 ， 来 构建 多 条 连接 在 一 起 
的 三 次 曲线 。 第 一 条 曲线 的 最 后 一 个 点 会 变 成 下 一 条 曲线 的 第 一 个 点 ， 以 此 类 推 。 这 里 有 
一 个 <path>， 绘 制 了 一 条 从 (30, 100) 到 (100, 100)， 控 制 点 在 (50, 50) 和 (70, 20) 的 三 次 曲 
线 ， 后 面 又 紧 跟 着 一 条 曲线 ， 折 回 到 (65, 100)， 控 制 点 在 (110，130) 和 (45, 150) 处 。 下 面 
是 这 个 路 径 的 SVG， 加 粗 的 是 控制 点 坐标 : 














<path d="M30 100 C 50 50, 70 20, 100 100， 
110, 130, 45, 150, 65, 100"/> 


结果 如 图 7-13 左 半 部 分 所 示 ， 右 半 部 分 展示 了 控制 点 和 线 。 


人 


图 7-13; 多 条 连接 在 一 起 的 三 次 贝 塞 尔 曲线 


如 果 想 要 保证 曲线 之 间 的 连接 平滑 ， 可 以 使 用 5 命令 〈 或 者 如 果 想 要 使 用 相对 坐标 ， 就 用 

s)。 在 某 种 程度 上 ， 它 和 二 次 曲线 的 TT 命令 类 似 ， 新 的 曲线 会 把 上 一 条 曲线 的 端点 作为 它 
的 起 点 ， 并 且 它 的 第 一 个 控制 点 是 上 一 个 终点 控制 点 的 中 心 对 称 点 。 我 们 需要 提供 的 只 是 
曲线 的 下 一 个 端点 的 控制 点 ， 然 后 紧 跟 着 的 是 下 一 个 端点 。 
























































这 里 有 一 个 三 次 贝 塞 尔 曲线 ， 从 (30,100) 到 (100,100)， 控 制 点 为 (50,30) 和 (70,50)。 然 后 
它 平 滑 过 渡 到 (200,80)， 使 用 (150,40) 作为 终点 控制 点 。 图 7-14 左 半 部 分 展示 了 曲线 ， 碳 
半 部 分 展示 了 带 有 控制 点 的 曲线 。 虚 线 展示 了 中 心 对 称 的 控制 Ro 











<path d="M30 100 C 50 30 


， 70 50, 100 100 S 150 40, 200 80"/> 








[oo 








图 7-14: 平滑 的 三 次 贝 塞 尔 曲 线 


7.7 ”路 径 总 结 


表 7-1 中 ， 大 写 命令 使 用 绝对 坐标 ， 小 写 命令 使 用 相对 坐标 。 


表 7-1: 路 径 命令 
































命令 参 数 效 果 

Mm xy 移动 到 给 定 坐 标 

L 1 XxXy 绘制 一 条 到 给 定 坐 标的 线 。 可 以 提供 多 组 坐标 来 绘制 折线 

Hh 民 绘制 一 条 到 给 定 x 坐标 的 横 线 

Vv y 绘制 一 条 到 给 定 y 坐标 的 坚 线 

Aa rx ry x-axis- 绘制 一 个 从 当前 点 到 (x,y) 的 椭圆 弧 。 椭 圆 上 的 x 半径 为 rx, y 半 径 为 ry。 
rotation 椭圆 旋转 ry x-axis-rotation 度 。 如 果 圆 弧 小 于 180 度 ， 则 Large-arc 为 


large-arc sweep x y 0; 如 果 大 于 180 度 ， 则 Large-arc 为 1。 如 果 圆 驳 按 顺 时 旬 

















方向 绘制 ， 则 



























































sweep 为 1， 否则 为 0 

Qq xyxy 绘制 一 条 从 当前 点 到 (x, y)， 控 制 点 为 cl y1) 的 二 次 贝 塞 尔 曲 线 

Tt XXy 绘制 一 条 从 当前 点 到 (x,y) 的 二 次 贝 塞 尔 曲 线 。 控 制 点 是 前 一 个 Q 命令 的 控 
制 点 的 中 心 对 称 点 。 如 果 没 有 前 一 条 曲线 ， 当 前 点 会 被 用 作 控 制 点 

Ce x1y1lx2y2xy 绘制 一 条 从 当前 点 到 (x, y) 的 三 次 贝 塞 尔 曲线 ，(x1, y1) 为 曲线 的 开始 控制 
点 ，(x2, 72) 为 曲线 的 终点 控制 点 

Ss x2y2xy 绘制 一 条 从 当前 点 到 (x, y) 的 三 次 贝 塞 尔 曲线 ， 使 用 (x2, y2) 作为 新 端点 的 
控制 点 。 第 一 个 控制 点 是 前 一 个 C 命令 的 终点 控制 点 的 中 心 对 称 点 。 如 果 
前 一 个 曲线 不 存在 ， 当 前 点 会 被 用 作 第 一 个 控制 点 























pA 
7.8 ”路 径 和 填充 
4.5 节 描 述 的 信息 同样 适用 于 路 径 ， 路 径 中 不 仅 可 以 有 相交 线 ， 还 可 以 有 “缺口 ”。 思 考 一 
下 示例 7-5 中 的 路 径 ， 两 条 路 径 都 绘制 了 般 套 正方 形 。 第 一 个 路 径 中 ， 按 照 顺 时 针 方向 绘 
制 了 两 个 正方 形 ;， 第 二 个 路 径 中 ， 外 部 正方 形 按 顺 时 针 方 向 绘制 ， 内 部 正方 形 按 逆 时 针 方 


向 绘制 。 








示例 7-5: 在 路 径 中 使 用 不 同 的 亿 Ll-rule 值 


<!-- 顺 时 针 方 向 的 路 径 --> 
<path d="M 0 0, 60 0, 60 60, 0 60 7 
M 15 15, 45 15, 45 45, 15 45Z"/> 





<!-- 外 部 路 径 为 顺 时 针 方 向 ,内 部 路 径 为 逆 时 针 方 向 --> 
<path d="M 0 90, 60 0, 60 60, 0 60 7 
M 15 15, 15 45, 45 45, 45 152"/> 





图 7-15 展示 了 使 用 fill-rule 为 nonzero 时 的 不 同 ， 确 定 一 个 点 是 在 路 径 的 内 部 还 是 外 部 
时 参考 线条 的 方向 。 而 使 用 fill-rule=evenodd 为 两 个 路 径 生 成 了 相同 的 结果 ， 它 参考 的 
是 交叉 线 的 总 数 ， 但 是 忽略 它们 的 方向 。 





口 


方向 相同 方向 相反 


fill-rule="nonzero" fill-rule="nonzero" 


回 





相同 方向 相反 


方向 相 所 
fill-rule="evenodd” fill-rule="evenodd”" 


EE 











图 7-15: 使 用 不 同 作 L-rute 的 结果 


7.9 ”<marker> 元 素 
思考 下 面 的 路 径 ， 其 中 用 了 两 条 线 和 一 个 椭圆 弧 绘 制 如 图 7-16 所 示 的 圆 角 ; 




















<path d="M 10 20 100 20 A 20 30 0 0 1 120 50 L 120 110" 
style="fill: none; stroke: black;"/> 














图 7-16: 线 和 圆 激 


假设 想 要 通过 在 开始 位 置 放 一 个 圆 ， 在 结束 位 置 放 一 个 实心 三 角形 ， 以 及 在 其 他 顶点 放 
一 些 箭头 来 标记 路 径 的 方向 ， 如 图 7-17 所 示 的 那样 。 要 实现 这 一 效果 ， 需 要 构建 三 个 
<marker> 元 素 ， 然 后 让 <path> 元 素 引 用 它们 。 






































7-17: 带 有 标记 的 线 和 辆 激 


在 示例 7-6 中 ， 第 一 步 添 加 了 圆 形 标 记 。 一 个 标记 就 是 一 个 “独立 的 ”图 形 ， 它 拥有 自己 
私有 的 坐标 ， 因 此 必须 在 开始 标记 <marker> 中 指定 它 的 markerwidth 和 markerHeight。 后 
面 是 绘制 标记 需要 的 SVG 元 素 ， 最 后 以 结束 标记 </marker> 结束 。<marker> 元 素 自 身 不 会 
示 ， 但 是 可 以 把 它 放 到 <defs> 元 素 中 ， 因 为 它 是 存放 可 复 用 元 素 的 。 






































希 














因为 我 们 想 要 圆 形 位 于 路 径 的 开始 位 置 ， 因 此 给 <path> 的 style 属性 添加 了 一 个 marker- 
start。 “这 个 属性 的 值 是 刚才 创建 的 <marker> 元 素 的 URL。 

















示例 7-6: 圆 形 标记 初试 
<defs> 
<marker id="mCircle" markerWidth="10" markerHeight="10"> 
<circle cx="5" cy="5" r="4" style="fill: none; stroke: black;"/> 
</marker> 
</defs> 


<path d="M 10 20 100 20 A 20 30 0 0 1 120 50 L 120 110" 
style="marker-start: url(#mCircle); 
fill: none; stroke: black;"/> 





结果 如 图 7-18 所 示 ， 但 结果 并 不 完全 符合 预期 。 























图 7-18: 放置 错误 的 圆 形 标记 


圆 形 标 记 显示 在 错误 位 置 的 原因 是 ， 默 认 情况 下 ， 开 始 标记 的 (0,0) 点 与 路 径 的 开始 坐标 
对 齐 。 示 例 7-7 中 添加 了 refX 和 refY 属性 指定 哪个 坐标 (标记 的 坐标 系统 中 ) 与 路 径 的 
开始 坐标 对 齐 。 一 旦 添加 好 之 后 ， 圆 形 标记 就 会 精确 地 显示 在 图 7-19 中 期 望 的 位 置 。 
































示例 7-7: 正确 放置 圆 形 标记 
<marker id="mCircle" markerWidth="10" markerHeight="10" 
refX="5" refY="5"> 
<circle cx="5" cy="5" r="4" style="fill: none; stroke: black;"/> 
</marker> 


注 2: 是 的 ， 标 记 被 认为 是 表现 而 不 是 结构 的 一 部 分 。 这 是 灰色 地 带 之 一 ， 你 可 以 支持 任何 一 种 观点 。 

















7-19: 正确 放置 的 圆 形 标记 





基于 以 上 信息 ， 现 在 可 以 编写 示例 7-8 了 ， 其 中 添加 了 三 角形 标记 并 在 路 径 的 marker-end 
中 引用 它 。 然 后 可 以 添加 箭头 标记 并 在 marker-mid 中 引用 它 。marker-mid 会 附加 给 除 路 径 
起 点 和 终点 以 外 的 每 个 顶点 。 注 意 ， 还 设置 了 refx 和 refY 属性 ， 因 此 箭头 较 宽 的 一 端 能 
与 中 间 的 顶点 对 齐 ， 而 实心 三 角形 的 尖 角 与 结束 顶点 对 齐 。 图 7-20 展示 了 结果 ， 但 是 只 正 
确 绘制 了 第 一 个 标记 ， 其 他 标记 并 不 正确 。 


示例 7-8: 尝试 使 用 三 个 标记 
<defs> 
<marker id="mCircle" markerWidth="10" markerHeight="10" 
refX="5" refY="5"> 


<circle cx="5" cy="5" r="4" style="fill: none; stroke: black;"/> 
</marker> 

















<marker id="mArrow" markerWidth="4" and markerHeight="8" 
refX="0" refY="4"> 
<path d="MO0Q0440 8" style="fill: none; stroke: black;"/> 
</marker> 


<marker id="mTriangle" markerWidth="5" markerHeight="10" 
refX="5" refY="5"> 
<path d="M0055010Z" style="fill: black;"/> 
</marker> 
</defs> 


<path d="M 10 20 100 20 A 20 30 0 0 1 120 50 L 120 110" 
style="marker-start: url(#mCircle); 
marker-mid: url(#mArrow); 
marker-end: url(#mTriangle); 
fill: none; stroke: black;"/> 














7-20: 错误 定向 的 标记 


为 了 获取 想 要 的 效果 ， 必 须 明确 设置 标记 的 orient 属性 为 auto。 这 会 让 标记 自动 旋转 来 
匹配 路 径 的 方向 。”( 也 可 以 指定 度数 , 此 时 标记 始终 按照 指定 的 度数 旋转 。) 示例 7-9 中 的 











注 3: 确切 地 讲 ， 旋 转角 度 是 线条 进入 标记 图 形 和 线条 退出 标记 图 形 时 的 角度 平均 值 。 

















ti 








标记 会 生成 图 7-17 所 示 的 结果 。 无 需 确 定 圆 的 方向 ;不 管 怎么 旋转 ， 它 看 起 来 都 一 样 。 











示例 7-9: 正确 定向 的 标记 
<defs> 
<marker id="mCircle" markerWidth="10" markerHeight="10" 
refX="5" refY="5"> 
<circle cx="5" cy="5" r="4" style="fill: none; stroke: black;"/> 
</marker> 


<marker id="mArrow" markerWidth="6" markerHeight="10" 

refX="0" refY="4" orient="auto"> 

<path d="MO04490 8" style="fill: none; stroke: black;"/> 
</marker> 


<marker id="mTriangle" markerWidth="5" markerHeight="10" 
refX="5" refY="5" orient="auto"> 
<path d="M0055010 2Z" style="fill: black;"/> 
</marker> 
</defs> 


<path d="M 10 20 100 20 A 20 30 0 0 1 120 50 L 120 110" 
style="marker-start: url(#mCircle); 
marker-mid: url(#mArrow); 
marker-end: url(#mTriangle); 
fill: none; stroke: black;"/> 

















另 一 个 有 用 的 属性 是 markerunits。 如 果 设 置 为 strokewidth， 那 么 标记 的 坐标 系统 会 被 设 
定 为 单位 等 于 笔画 宽度 。 标 记 会 与 笔画 宽度 成 正比 ， 这 是 它 的 默认 行为 ,通常 也 是 我 们 想 
要 的 。 如 果 设 置 这 个 属性 为 userSpace0nUse， a 系统 会 被 假定 为 和 引用 该 标记 的 
对 象 的 坐标 系统 一 样 。 不 管 笔画 宽度 为 多 少 ， 标 记 都 会 保持 相同 的 尺寸 。 


7.10 标记 记录 


如 果 想 要 路 径 的 起 点 、 中 间 和 终点 都 使 用 相同 的 标记 ， 无 需 指定 所 有 的 marker-start、 
marker-mid 和 marker-end 属性 。 只 需 使 用 marker 属性 引用 想 要 的 标记 即 可 。 因 此 ， 如 果 
想 要 所 有 的 顶点 都 有 一 个 圆 形 标记 ， 如 图 7-21 所 示 ， 编 写 示 例 7-10 所 示 的 SVG 即 可 。 





























示例 7-10: 为 所 有 顶点 使 用 一 个 标记 


<defs> 
<marker id="mCircle" markerWidth="10" markerHeight="10" 
refX="5" refY="5"> 
<circle cx="5" cy="5" r="4" style="fill: none; stroke: black;"/> 
</marker> 
</defs> 


<path d="M 10 20 100 20 A 20 30 0 0 1 120 50 L 120 110" 
style="marker: url(#mCircle); fill: none; stroke: black;"/> 














7-21: 为 所 有 顶点 使 用 一 个 标记 


还 可 以 在 <marker> 元 素 上 设置 viewBox 和 preserveAspectRatio 属性 ， 以 更 好 地 控制 它 的 
显示 效果 。 例 如 ， 可 以 使 用 viewBox 定义 网 格 ， 让 (0,0) 坐标 位 于 标记 的 中 心 ， 我 们 可 能 想 
要 使 用 这 种 方式 ， 而 不 是 使 用 refx 和 refY。viewBox 和 preserveAspectRaio 属性 的 工作 方 
式 已 在 3.3 节 和 3.4 节 介 绍 过 。 























可 以 在 <poLygon>、<poLyLine> 或 者 <Line> 元 素 以 及 <path> 中 引用 <marker>。 


你 可 能 有 过 这 种 想法 :“ 如 果 标 记 中 可 以 有 路 径 ， 那 么 该 路 径 中 是 否 也 可 以 有 标记 ? ” 答 
案 是 “可 以 ”， 但 是 第 二 个 标记 必须 适 配 由 第 一 个 标记 的 markerWidth 和 markerHeight 建立 
的 矩形 。 记 住 ， 我 们 只 是 说 这 样 做 是 可 行 的 ， 但 并 不 鼓励 这 样 做 。 如 果 需 要 这 种 效果 ， 最 
好 将 从 属 标记 也 作为 主 标记 的 一 部 分 ， 而 不 是 尝试 出 套 标记 。 








确保 没有 为 标记 定义 自己 作为 从 属 标记 。 用 如 下 的 CSS 规则 为 所 有 的 路 径 添 加 一 个 星 形 标 
记 时 ， 可 能 会 发 生 这 种 情况 。 


path { marker: url(#star) } 

















如 果 id 为 star 的 <marker> 元 素 中 也 有 一 个 <path>， 这 个 路 径 会 无 限 循 环 地 引用 标记 自 
身 。 为 了 防止 这 种 情况 发 生 ， 要 添加 一 条 CSS 规则 ， 说 明 不 要 给 星 形 标记 中 的 路 径 添 加 任 
何 标记 : 


path {marker: url(#star)} 
marker#star path {marker: none} 
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到 目前 为 止 ， 我 们 只 用 了 纯色 来 为 图 形 对 象 填充 颜色 和 绘制 轮廓 。 除 了 纯色 以 外 ， 我 们 还 
可 以 使 用 图 案 和 渐变 来 填充 图 形 或 者 绘制 图 形 轮 廊 。 这 也 是 本 章 要 讨论 的 内 容 。 


8.1 图 案 


要 使 用 图 和 案 ， 首 先 要 定义 一 个 水 平 或 者 垂直 方向 重复 的 图 形 对 象 ， 然 后 用 它 填 充 另 一 个 对 
象 或 者 作为 笔画 使 用 。 这 个 图 形 对 象 被 称 作 tile (瓷砖 ) ， 因 为 使 用 图 案 填充 对 象 的 行为 很 
像 在 地 面 上 铺 次 砖 的 过 程 。 本 市 ， 我 们 会 把 示例 8-1 中 使 用 SVG 绘制 的 二 次 曲线 作为 图 
案 。 灰 色 的 轮廓 清晰 地 显示 了 它 的 面积 (20 乘 20 用 户 单位 )。 
































示例 8-1: 图 案 的 路 径 
<path d="MOO0OQS ?20 10 10T 20 20" 
style="stroke: black; fill: none;"/> 
<path d="M 0 0 h20 v20 h-20 z" 
style="stroke: gray; fill: none;"/> 


8-1 是 放大 后 的 图 案 ， 方便 查看 细 习 。 


WW 














8-1: 放大 后 的 图 案 
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8.1.1 patternUnits 


要 创建 一 个 图 案 ， 必 须 使 用 <pattern> 元 素 包 衷 描述 图 案 的 <path> 元 素 ， 然 后 确定 一 些 事情 。 
第 一 个 需要 确定 的 是 希望 如 何 排列 图 和 案 ， 这 一 点 体现 在 patternunits 属性 上 。 是 想 让 每 个 医 
案 填 充 对 象 的 一 定 百分比 ， 还 是 想 以 相同 大 小 的 图 案 平 铺 ， 而 无 论坛 充 对 象 的 尺寸 多 大 ? 


如 果 希 望 图 案 的 尺寸 基于 对 象 的 大 小 计算 ， 需 要 指定 图 案 左 上 角 的 x 和 y 坐 标 ， 以 及 
其 width 和 height (百分比 或 者 0 到 1 之 间 的 小 数 )， 然 后 设置 patternUnits 属性 为 
objectBoundingBox (边界 框 )。 对 象 的 边界 框 是 一 个 完全 包 囊 图 形 对 象 的 最 小 矩形 。 示 例 
8-2 创建 了 一 个 简单 的 图 案 ， 它 会 在 它 所 填充 的 对 象 中 水 平和 垂直 方向 各 重复 5 次 。 




































































示例 8-2: 设置 patternUnits 为 objectBoundingBox 

<defs> 

<pattern id="tile" x="0" y="0" width="20%" height="20%" 
patternUnits="objectBoundingBox"> 

<path d="MOO0OQS ?20 10 10T 20 20" 
style="stroke: black; fill: none;"/> 

<path d="MOOh20v20h -20z" 
style="stroke: gray; fill: none;"/> 

</pattern> 

</defs> 


<rect x="20" y="20" width="100" height="100" 
style="fill: url(#tile); stroke: black;"/> 

<rect x="135" y="20" width="70" height="80" 
style="fill: url(#tile); stroke: black;"/> 

<rect x="220" y="20" width="150" height="130" 
style="fill: url(#tile); stroke: black;"/> 


图 8-2 中 ， 左 侧 和 矩形 的 宽 高 为 100 用 户 单位 ， 正 好 容纳 5 个 宽 高 为 20 用 户 单位 的 图 案 。 中 
间 和 矩形 的 宽 高 不 够 完全 展示 任意 一 个 图 案 ， 因 此 它们 被 截断 了 。 右 侧 的 矩形 中 ， 产 生 了 额 
外 的 间 际 ， 因 为 其 宽 高 超过 一 个 图 案 所 需 空 间 的 5 倍 。 由 于 图 案 设 置 了 x 和 y 值 为 0， 因 
此 在 上 面 的 例子 中 左上 角 都 恰好 为 矩形 的 左上 角 。 


8-2: 基于 objectBoundingBox 排列 的 图 案 

你 可 能 会 惊讶 地 发 现 ， 上 面 的 平 铺 方式 和 大 多 数 图 形 设 计 程 序 都 不 一 样 。 标 准 的 图 形 编 辑 
程序 会 在 画布 上 将 图 案 一 个 接 一 个 地 放置 ， 而 无 管 尺寸 是 多 少 。 这 些 图 案 之 间 不 会 有 额外 
的 间隙 ， 并 且 只 在 所 填充 对 象 的 边缘 发 生 进行 裁剪 。 如 果 这 种 行为 是 你 想 要 的 ， 则 必须 设 































































































图 案 和 渐变 | 91 











置 patternUnits 属性 值 为 userSpace0nUse， 还 要 指定 x 和 y 坐标 ， 以 及 按 用 户 单位 指定 图 
案 的 width 和 height。 示 例 8-3 使 用 了 同样 的 图 案 ， 还 精确 地 设置 它 的 宽度 和 高 度 为 20 用 
户 单位 。 

示例 8-3: 改变 patternUnits 为 userSpaceOnUse 
htip://oreillymedia.github.io/sveg-essentials-examples/ch08/patternunits.html 


<defs> 

<pattern id="tile" x="0" y="0" width="20" height="20" 
patternUnits="userSpaceOnUse"> 

<path d="MO0OQS ?20 10 10T 20 20" 
style="stroke: black; fill: none;"/> 

<path d="MOOh20v20h -20z" 
style="stroke: gray; fill: none;"/> 

</pattern> 

</defs> 


<rect x="20" y="20" width="100" height="100" 
style="fill: url(#tile); stroke: black;"/> 

<rect x="135" y="20" width="70" height="80" 
style="fill: url(#tile); stroke: black;"/> 

<rect x="220" y="20" width="150" height="130" 
style="fill: url(#tile); stroke: black;"/> 





8-3 中 ， 三 个 矩形 中 的 图 案 尺寸 都 是 固定 的 。 但 是 它们 的 对 齐 方 式 取决 于 所 在 的 坐标 系 
统 。 例 如 ， 中 间 和 矩形 的 x 坐标 并 不 是 20 的 倍数 ， 因 此 甜 形 的 左上 角 不 能 与 图 案 的 左上 角 
重合 (但 是 顶部 是 对 齐 的 ， 因 为 三 个 矩形 的 y 坐标 都 是 特意 选择 的 ， 都 是 20 的 倍数 ) 。 















































8-3: 使 用 userSpaceOnUse 设置 图 案 间隔 





如 果 没 有 指定 patternUnits 值 ， 默 认为 objectBoundingBox。 


8.1.2 patternContentUnits 

接 下 来 必须 要 确定 的 是 用 什么 单位 表达 图 案 数据 本 身 。 默 认 情 况 下 ，patternContentUnits 
属性 值 为 userSpaceOnUse。 如 果 设 置 属性 值 为 objectBoundingBox， 则 路 径 本 身 的 数据 点 会 
基于 被 填充 的 对 象 来 确定 。 示 例 8-4 中 的 SVG 结果 如 图 8-4。 























如 果 patternContentUnits 使 用 userSpace0nUse， 那 么 图 案 的 边界 框 左 上 和 角 
应 该 在 原点 (0, 0) 位 置 。 



































如 果 使 用 objectBoundtngBox， 则 需要 在 图 案 中 减 小 stroke-width 的 值 。 图 
案 的 宽度 也 会 以 被 填充 对 象 的 边界 框 作为 参考 ， 而 不 会 使 用 用 户 单位 ， 因 
此 stroke-width 为 1 会 覆盖 整个 图 案 。 在 这 个 例子 中 ， 笔 画 宽 度 被 设置 为 
0.01， 也 就 是 被 填充 对 象 边界 框 宽度 和 高 度 均 值 的 1%。 





























示例 8-4: 设置 patternContentUnits 为 objectBoundingBox 


<defs> 
<pattern id="tile" 
patternUnits="objectBoundingBox" 
patternContentUnits="objectBoundingBox" 
x="0" y="0" width=".2" height=".2"> 
<path d="MOO0OQ .05 .20 .10 .10T .20 .20" 
style="stroke: black; fill: none; stroke-width: 0.01;"/> 
<path d="MOOQOh oO.2v 90.2 h-0.2z" 
style="stroke: black; fill: none; stroke-width: 0.01;"/> 
</pattern> 


</defs> 


<g transform="translate(20, 20)"> 

<rect x="0" y="Q" width="100" height="100" 
style="fill: url(#tile); stroke: black;"/> 

</g> 


<g transform="translate(135, 20)"> 

<rect x="0" y="0" width="70" height="80" 
style="fill: url(#tile); stroke: black;"/> 

</g> 


<g transform="translate(220, 20)"> 

<rect x="0" y="0" width="150" height="130" 
style="fill: url(#tile); stroke: black;"/> 

</g> 




















8-4: 设置 patternContentUnits 为 objectBoundingBox 


如 果 想 缩小 现 有 的 图 形 对 象 当 作 图 案 ， 则 使 用 viewBox 属性 来 缩放 更 容易 。 指 定 viewBox 
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会 覆盖 任何 patternContentUnits 信息 。 另 一 种 做 法 是 像 3.4 闻 中 所 描述 的 那样 ， 设 置 


preserveAspectRatio 属性 。 示 例 8-5 使 用 了 图 7-13 中 的 三 次 贝 塞 尔 曲线 的 缩小 版 作为 区 














案 。stroke-width 被 设置 为 5; 否则 当 缩 小 SVG 时 ， 在 图 8-5 中 将 看 不 到 图 案 。 


示例 8-5: 使 用 viewBox 缩放 图 案 


<defs> 

<pattern id="tile" 
patternUnits="userSpaceOnUse" 
x="0" y="0" width="20" height="20" 
viewBox="0 0 150 150"> 





<path d="M30 100 C 50 50, 70 20, 100 100， 
110, 130, 45, 150, 65, 100" 


style="stroke: black; stroke-width: 5; fill: 


</pattern> 
</defs> 


<rect x="20" y="20" width="100" height="100" 
style="fill: url(#tile); stroke: black;"/> 


none;"/> 

















图 8-5: 使 用 viewBox 缩放 后 的 图 案 


8.1.3 图 案 舱 套 











同样 ， 你 可 能 会 想到 : “如果 对 象 可 以 使 用 图 案 填 充 ， 那 么 图 案 能 够 使 用 图 案 填 充 吗 ?“ 
答案 是 表 定 的 。 和 标记 舱 套 完全 不 同 〈 很 少 需要 和 骨 套 标记 ) ， 如 有 果 不 使 用 图 案 蔷 套 ， 有 些 








效果 很 难 实现 。 示 例 8-6 创建 了 一 个 使 用 圆 填 充 的 和 矩形， 这 
产生 了 一 种 不 常见 ， 但 是 有 效 的 、 带 虚线 的 条 纹 效果 ， 如 














示例 8-6: 图 和 案 区 和 套 
<defs> 
<pattern id="stripe" 
patternUnits="userSpaceOnUse" 
x="0" y="0" width="6" height="6"> 
<path d="MOOQ0O6OQ" 


style="stroke: black; fill: none;"/> 


</pattern> 


<pattern id="polkadot" 
patternUnits="userSpaceOnUse" 
x="0" y="0" width="36" height="36"> 
<circle €x="12" cy="12" f="12" 


style="fill: url(#stripe); stroke: 


black;"/> 























些 圆 都 使 用 横向 条 纹 填充 。 这 








到 8-6 所 示 。 











</pattern> 
</defs> 


<rect x="36" y="36" width="100" height="100" 
style="fill: url(#polkadot); stroke: black;"/> 

















8-6: 图 案 中 的 图 案 


8.2 渐变 


我 们 可 以 使 用 渐变 填充 对 象 ， 也 就 是 从 一 个 颜色 平滑 地 过 渡 到 另 一 个 ， 而 不 是 使 用 纯色 填 
充 对 象 。 渐 变 可 以 是 线性 的 ， 即 颜色 沿 着 直线 过 渡 ， 也 可 以 是 径 向 的 ， 即 颜色 从 中 心 点 向 
外 辐射 (发散) 过渡。 


8.2.1 linearGradient 元 素 


线性 渐变 就 是 一 系列 闫 色 沿 着 一 条 直线 过 渡 。 在 特定 的 位 置 指定 想 要 的 颜色 ， 被 称 作 渐 
变 点 (gradient stop)。 渐 变 点 是 渐变 结构 的 一 部 分 ， 颜 色 是 表现 的 一 部 分 。 示 例 8-7 中 的 
SVG 展示 了 一 个 由 金黄 色 平 滑 过 渡 到 青色 的 渐变 填充 的 矩形 。 结 果 如 图 8-7 所 示 。 


示例 8-7: 简单 的 双色 渐变 
http://oreillymedia.github.io/sveg-essentials-examples/ch08/linear_gradient.html 


<defs> 
<linearGradient id="two_hues"> 
<stop offset="0%" style="stop-color: #ffcc00;"/> 
<stop offset="100%" style="stop-color: #0099cc;"/> 
</LinearGradient> 
</defs> 


<rect x="20" y="20" width="200" height="100" 
style="fill: url(#two_hues); stroke: black;"/> 

















8-7: 简单 的 双色 渐变 
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1. <stop> 元 素 

让 我 们 仔细 看 看 <stop> 元 素 。 它 有 两 个 必要 属性 : offset 和 stop-color。offset 用 于 确 
定 线 上 哪个 点 的 颜色 应 该 等 于 stop-color。offset 的 值 使 用 0 到 100% 之 间 的 百分比 或 者 
0 到 1.0 之 间 的 小 数 表 示 。 虽 然 在 0% 和 100% 位 置 设置 渐变 点 并 不 是 必须 的 ， 但 是 通常 我 
们 都 会 这 么 做 。 这 里 的 stop-color 被 指定 在 style 中 ， 但 是 也 可 以 指定 它 为 独立 属性 。 示 
例 8-8 展示 了 一 个 稍微 复杂 一 点 的 线性 渐变 ，0% 位 置 的 颜色 为 金黄 色 ，33.3% 位 置 的 颜色 
为 紫红 色 ，1009% 位 置 的 颜色 为 淡 绿 色 。 结 果 如 图 8-8 所 示 。 



































示例 8-8: 三 色 渐 变 
htip://oreillymedia.github.io/sveg-essentials-examples/ch0S/three_stop_ gradient.html 


<defs> 
<linearGradient id="three_stops"> 
<stop offset="0%" style="stop-color: #ffcc00;"/> 
<stop offset="33.3%" style="stop-color: #cc6699" /> 
<stop offset="100%" style="stop-color: #66cc99;"/> 
</LinearGradient> 
</defs> 


<rect x="20" y="20" width="200" height="100" 
style="fill: url(#three_stops); stroke: black;"/> 

















8-8: 三 色 渐变 

指定 渐变 点 颜色 的 时 候 还 可 以 使 用 stop-opacity 属性 ， 值 为 1 表示 完全 不 透明 ， 为 0 则 表 
示 完 全 透明 。 示 例 8-9 创建 了 一 个 快速 淡出 到 中 点 位 置 ， 然 后 向 终点 褪色 的 崭 变 。 其 结果 
如 图 8-9 所 示 。 








示例 8-9: 带 有 三 个 opacity 的 渐变 
http://oreillymedia.github.io/sve-essentials-examples/ch08/stop_opacity.html 


<defs> 
<linearGradient id="three_ opacity_stops"> 
<stop offset="0%" style="stop-color: #906; stop-opacity: 1.0"/> 
<stop offset="50%" style="stop-color: #906; stop-opacity: 0.3"/> 
<stop offset="100%" style="stop-color: #906; stop-opacity: 0.10"/> 
</LinearGradient> 
</defs> 


<rect x="20" y="20" width="200" height="100" 
style="fill: url(#three opacity_stops); stroke: black;"/> 




















8-9: 使 用 stop-opacity 的 渐变 


2. 定义 线性 渐变 的 方向 

线性 渐变 的 默认 行为 是 沿 着 水 平 线 从 对 象 的 左 侧 向 右 侧 过 渡 。 如 果 想 要 颜色 沿 着 竖 线 或 者 
有 角度 的 线条 过 渡 ， 就 必须 使 用 xi1 和 yi 以 及 x2 和 y2 属性 指定 渐变 的 起 点 和 终点 。 上 默认 
情况 下 ， 它 们 也 使 用 0% 到 100% 的 百分比 或 者 0 到 1 的 小 数 表示 。 示 例 8-10 用 相同 的 渐 
变 点 建立 了 一 个 水 平 渐变 、 垂 直 渐 变 和 对 角 〈 线 ) 渐变 。 这 个 例子 使 用 xtink:href 属性 引 
用 原始 的 从 左 到 右 的 渐变 ， 而 不 是 将 渐变 点 复制 给 每 个 <LinearGradient> 元 素 。 这 样 新 变 
点 会 被 继承 ,但 是 x 坐标 和 >》 坐标 会 被 每 个 独立 的 渐变 重 写 。 示 例 8-10 中 的 SVG 结果 如 
图 8-10 所 示 ，SVG 并 不 包括 图 中 的 箭头 。 


示例 8-10: 定义 线性 渐变 的 方向 


http://oreillymedia.github.io/svg-essentials-examples/ch08/transition line.html 


出 











<defs> 

<linearGradient id="three_stops"> 
<stop offset="0%" style="stop-color: #ffcc00;"/> 
<stop offset="33.3%" style="stop-color: #cc6699;"/> 
<stop offset="100%" style="stop-color: #66cc99;"/> 

</LinearGradient> 


<linearGradient id="right_to_left" 
xlink:href="#three_stops" 
x1="100%" y1="0%" x2="0%" y2="0%"/> 


<linearGradient id="down" 
xlink:href="#three_stops" 
x1="0%" y1="0%" x2="0%" y2="100%"/> 


<linearGradient id="up" 
xlink:href="#three_stops" 
x1="0%" y1="100%" x2="0%" y2="0%"/> 


<linearGradient id="diagonal" 
xlink:href="#three_stops" 
x1="0%" yl1="0%" x2="100%" y2="100%"/> 
</defs> 


<rect x="40" y="20" width="200" height="40" 
style="fill: url(#three_stops); stroke: black;"/> 


<rect x="40" y="70" width="200" height="40" 
style="fill: url(#right_to_left); stroke: black;"/> 
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<rect x="250" y="20" width="40" height="200" 
style="fill: url(#down); stroke: black;"/> 


<rect x="300" y="20" width="40" height="200" 
style="fill: url(#up); stroke: black;"/> 


<rect x="40" y="120" width="200" height="100" 
style="fill: url(#diagonal); stroke: black;"/> 


图 8-10: 定义 线性 渐变 的 方向 

















如 果 想 要 使 用 用 户 坐 标 空间 而 不 是 百分比 指定 渐变 方向 ， 设 置 gradientUnits 
为 userSpaceOnUse 而 不 是 默认 值 objectBoundingBox 即 可 。 


3. spreadMethod 属 性 

指定 过 渡 方 向 时 并 不 一 定 要 从 对 象 的 一 角 到 另 一 角 。 如 果 我 们 指定 从 (20%, 30%) 到 (40%， 
80%) 会 发 生 什 么 ”对象 中 在 指定 范围 之 外 的 部 分 会 发 生 什么 ”可 以 设置 spreadMethod 属 
性 为 下 列 值 之 一 。 


。 pad 
起 始 和 结束 渐变 点 会 扩展 到 对 象 的 边缘 。 
。 repeat 
渐变 会 重复 起 点 到 终点 的 过 程 ， 直 到 填充 满 整个 对 象 。 
。 reflect 
渐变 会 按 终点 到 起 点 、 起 点 到 终点 的 排列 重复 ， 直 到 填充 满 整 个 对 象 。 
图 8-11 中 左 侧 的 正方 形 展示 了 pad 效果 ， 中 间 的 正方 形 展示 了 repeat 效果 ， 右 侧 的 正方 形 展示 
了 reflect 效果 。 示 例 8-11 的 图 中 ， 正 方形 中 原始 的 渐变 被 加 上 了 一 条 线 ， 这 样 效果 会 更 明显 。 


示例 8-11: spreadMethod 值 的 线性 渐变 效果 
http://oreillymedia.github.io/sve-essentials-examples/ch08/spread_method.html 

















<defs> 
<linearGradient id="partial" 
x1="20%" y1="30%" x2="40%" y2="80%"> 
<stop offset="0%" style="stop-color: #ffcc00;"/> 
<stop offset="33.3%" style="stop-color: #cc6699;"/> 
<stop offset="100%" style="stop-color: #66cc99;"/> 
</LinearGradient> 


<LinearGradient id="padded" 
xlink:href="#partial" 
spreadMethod="pad"/> 


<linearGradient id="repeated" 
xlink:href="#partial" 
spreadMethod="repeat"/> 


<linearGradient id="reflected" 
xlink:href="#partial" 
spreadMethod="reflect"/> 


<line id="show-line" x1="20" y1="30" x2="40" y2="80" 
style="stroke: white;"/> 
</defs> 


<rect x="20" y="20" width="100" height="100" 
style="fill: url(#padded); stroke: black;"/> 
<use xlink:href="#show-line" transform="translate(20, 20)"/> 


<rect x="130" y="20" width="100" height="100" 
style="fill: url(#repeated); stroke: black;"/> 
<use xlink:href="#show-line" transform="translate(130, 20)"/> 


<rect x="240" y="20" width="100" height="100" 
style="fill: url(#reflected); stroke: black;"/> 
<use xlink:href="#show-line" transform="translate(240, 20)"/> 

















8-11: 线性 渐变 的 spreadMethod 值 : pad、repeat 和 reflect 


8.2.2 radialGradient 元 素 

另 一 种 渐变 类 型 是 径 向 渐变 ， 每 个 渐变 点 表示 一 个 圆 形 路 径 ， 从 中 心 点 向 外 扩散 。' 它 的 设 
置 方式 和 线性 渐变 大 致 相同 。 示 例 8-12 设置 了 一 个 三 色 渐 变 : 柳 色 、 绿 色 和 紫色 。 结 果 如 
图 8-12 所 示 。 








注 1: 如 果 填 充 对 象 的 边界 框 不 是 正方 形 的 ， 过 渡 路 径 会 变 成 椭圆 形 来 匹配 边界 框 的 长 宽 比 。 
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示例 8-12: 三 色 径 向 渐变 
http://oreillymedia.github.io/sve-essentials-examples/ch0s/three_stop_radial.html 


<defs> 


<radialGradient id="three_stops"> 
<stop offset="0%" style="stop-color: #f96;"/> 
<stop offset="50%" style="stop-color: #9c9;"/> 
<stop offset="100%" style="stop-color: #906;"/> 
</radialGradient> 
</defs> 


<rect x="20" y="20" width="100" height="100" 
style="fill: url(#three_stops); stroke: black;"/> 














8-12: 三 色 径 向 渐变 


1. 定义 径 向 渐变 的 范围 
径 疝 渐变 的 范围 不 是 使 用 线条 确定 哪里 是 点 0% 和 100%， 而 是 由 贺 形 ( 圈 ) 确定 ， 其 中 
中 心 点 为 0%， 外 圆周 定义 了 点 100%。 我 们 使 用 cx (中 心 点 x 坐标 )、cy (中 心 点 y 坐标 ) 


以 及 r (半径 ) 属性 定义 外 国 











。 所 有 这 些 属 性 值 都 是 对 象 外 边框 的 百分比 ， 默 认 值 都 为 





50%。 示 例 8-13 绘制 了 一 个 径 向 渐变 的 正方 形 ， 中 心 点 在 正方 形 的 左上 角 ， 外 边缘 在 右 下 





方 。 结 果 如 


示例 8-13: 为 径 向 渐变 设置 范围 





攻 | 











8-13 所 示 。 








http://oreillymedia.github.io/svg-essentials-examples/ch08/radial limits.html 


<defs> 


<radialGradient id="center_origin" 


cx="0%" Cy="0%" 
<stop offset= 


<stop offset="50%" 


<stop offset= 


</radialGradient> 
</defs> 


r="141%"> 
"0%" style="stop-color: #f96;"/> 


style="stop-color: #9c9;"/> 


"100%" style="stop-color: #906;"/> 


<rect x="20" y="20" width="100" height="100" 
style="fill: url(#center_origin); stroke: black;"/> 











8-13; 定义 径 向 渐变 的 范围 
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在 前 面 的 例子 中 ，radialGradient 的 r 被 设置 为 141%， 而 不 是 100%。 这 
是 因为 用 来 测量 半径 的 单位 是 对 象 边界 框 宽度 和 高 度 的 平均 值 ， 而 不 是 框 的 
对 角 线 。 正 方形 对 角 线 与 边 长 的 比例 是 2 的 平方 根 ， 即 1.41。 

















0% 点 也 被 称 作 焦点 ， 默 认为 100% 处 渐变 点 所 在 圆 的 圆心 。 如 果 希 望 点 0% 在 其 他 地 方 
而 不 是 圆心 ， 必 须 改变 fx 和 fy 属性 。 圆 的 焦点 应 该 建立 在 100% 处 渐变 点 所 在 圆 的 内 部 。 
如 果 不 是 ，SVG 阅读 器 会 自动 把 焦点 移 到 该 圆 的 焦点 。 





























示例 8-14 中 ， 圆 的 中 心 点 在 原点 位 置 ， 半 径 为 100%， 但 是 焦点 在 (50%,50%) 位 置 。 正 如 
在 图 8-14 中 可 以 看 到 的 ， 这 产生 一 种 移动 “中 心 点 ”的 视觉 效果 。 





示例 8-14: 设置 径 向 渐变 的 焦点 
htip://oreillymedia.github.io/sve-essentials-examples/ch08/radial focus.html 


<defs> 
<radialGradient id="focal_set" 
cx="0%" cy="Q%" fx="50%" fy="50%" r="100%"> 
<stop offset="0%" style="stop-color: #f96;"/> 
<stop offset="50%" style="stop-color: #9c9;"/> 
<stop offset="100%" style="stop-color: #906;"/> 
</radialGradient> 
</defs> 


<rect x="20" y="20" width="100" height="100" 
style="fill: url(#focal_set); stroke: black;"/> 














图 8-14: 设置 径 向 渐变 的 焦点 





<radialGradient> 的 范围 设置 属性 的 默认 值 如 下 所 示 。 


属 性 默认 值 














cx 50% (对 象 边界 框 的 水 平 中 心 点 ) 

cy 50% (对 象 边界 框 的 垂直 中 心 点 ) 

r 50% (对 象 边界 框 宽度 /高度 的 一 半 ) 
fx 和 cx 一 样 

fy 和 cy 一 样 
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如 果 想 用 用 户 空间 坐标 而 不 是 百分比 确定 圆 的 范围 ， 要 设置 gradientUnits 
为 userSpace0nUse， 而 不 是 默认 值 objectBoundingBox。 


2. 径 向 渐变 的 spreadMethod 属 性 

如 果 绘 制 的 范围 没有 到 达 对 象 的 边缘 ， 可 以 设置 spreadMethod 属性 为 前 面 “spreadMethod 
属性 ”中 所 描述 的 pad、repeat 或 者 reflect 三 个 值 之 一 ， 来 按照 期 望 的 方式 填补 剩 下 的 
空白 。 示 例 8-15 包含 了 这 三 种 效果 ， 图 8-15 中 左 侧 的 正方 形 展示 了 pad 渐变 效果 ， 中 间 
的 正方 形 为 repeat 渐 变 效果 ， 右 侧 的 正方 形 则 呈现 了 reflect 渐变 效果 。 


示例 8-15: 径 向 渐变 spreadMethod 的 效果 演示 
htip://oreillymedia.github.io/sve-essentials-examples/ch0Ss/radial_spread_method.html 





<defs> 
<radialGradient id="three_stops" 
CXx="0%" cy="0%" r="70%"> 
<stop offset="0%" style="stop-color: #f96;"/> 
<stop offset="50%" style="stop-color: #9c9;"/> 
<stop offset="100%" style="stop-color: #906;"/> 
</radialGradient> 


<radialGradient id="padded" xlink:href="#three_stops" 
spreadMethod="pad"/> 
<radialGradient id="repeated" xlink:href="#three_stops" 
spreadMethod="repeat"/> 
<radialGradient id="reflected" xlink:href="#three_stops" 
spreadMethod="reflect"/> 
</defs> 


<rect x="20" y="20" width="100" height="100" 
style="fill: url(#padded); stroke: black;"/> 

<rect x="130" y="20" width="100" height="100" 
style="fill: url(#repeated); stroke: black;"/> 

<rect x="240" y="20" width="100" height="100" 
style="fill: url(#reflected); stroke: black;"/> 

















图 8-15: 径 向 渐变 spreadMethod ( 值 为 pad、repeat 和 reflect) 的 效果 


8.2.3 渐变 总 结 
线性 渐变 和 径 向 渐变 描述 了 使 用 平 请 过 渡 的 颜色 填充 对 象 。 我 们 所 讨论 的 对 象 都 有 一 个 边 








界 框 ， 它 们 被 定义 为 完全 包含 对 象 的 最 小 矩形 。<LinearGradient> 和 <radiaLGradient> 元 
素 都 是 一 系列 <stop> 元 素 的 容器 。 每 个 <stop> 元 素 都 指定 stop-color、offset 和 可 选 的 
stop-opacity。 对 于 线性 渐变 ， 偏 移 就 是 渐变 线性 方向 的 距离 的 百分比 。 对 于 径 向 渐变 ， 
偏 移 就 是 渐变 半径 的 距离 的 百分比 。 


线性 渐变 中 ， 方 向 的 起 点 (拥有 0% 渐变 点 ) 由 属性 x1 和 yl 定义 ; 终点 (拥有 100% 浙 
变 点 ) 由 属性 xz 和 y2 定义 。 


对 于 径 向 渐变 ， 焦 点 (拥有 0% 渐变 点 ) 由 属性 fx 和 fy 定义 ， 拥 有 100% 渐变 点 的 圆 由 
中 心 点 坐标 cx、cy 和 半径 r 定义 。 





如 果 gradientUnits 属性 值 为 objectBoundingBox， 则 把 边界 框 尺 寸 的 百分比 (默认 行为 ) 
作为 坐标 。 如 果 设 置 为 userSpaceOnUse， 则 采用 填充 对 象 的 坐标 系统 。 


如 果 线 性 渐变 或 者 径 向 渐变 的 方向 没有 达到 填充 对 象 的 边界 ， 剩 余 空 间 的 着 色 由 
spreadMethod 属性 值 确 定 : 默认 值 pad 将 起 点 和 终点 颜色 扩展 到 边界 ，repeat 会 重复 起 点 
到 终点 的 渐变 直到 达到 边界 ，reflect 以 终点 到 起 点 、 起 点 到 终点 的 形式 重复 渐变 ， 直 到 达 
到 对 象 的 边界 。 


8.3 变换 图 案 和 渐变 


有 时 候 可 能 需要 斜 切 、 拉 伸 或 者 旋转 图 案 或 者 渐变 。 此 时 无 需 变换 填充 的 对 象 ， 而 是 变换 
用 来 填充 对 象 的 图 案 或 者 渐变 。 可 以 用 gradientTransform 和 patternTransfornm 属性 来 实 
现 ， 见 示例 8-16， 基 结果 如 图 8-16 所 示 。 


示例 8-16: 变换 图 案 和 渐变 
http://oreillymedia.github.io/sve-essentials-examples/ch0Ss/pattern_gradient transform.html 









































<defs> 

<pattern id="tile" x="0" y="0" width="20%" height="20%" 
patternUnits="objectBoundingBox"> 

<path d=" MO0OQS 20 10 10T 20 20" 
style="stroke: black; fill: none;"/> 

<path d=" MOQOh20v20h -20z" 
style="stroke: gray; fill: none;"/> 

</pattern> 


<pattern id="skewed-tile" 
patternTransform="skewY(15)" 
xlink:href="#tile"/> 


<linearGradient id="plain"> 
<stop offset="0%" style="stop-color: #ffcc00;"/> 
<stop offset="33.3%" style="stop-color: #cc6699;"/> 
<stop offset="100%" style="stop-color: #66cc99;"/> 
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</LinearGradient> 


<linearGradient id="skewed-gradient" 
gradientTransform="skewX(10)" 
xlink:href="#plain"/> 
</defs> 


<rect x="20" y="10" width="100" height="100" 
style="fill: url(#tile); stroke: black;"/> 

<rect x="135" y="10" width="100" height="100" 
style="fill: url(#skewed-tile); stroke: black;"/> 


<rect x="20" y="120" width="200" height="50" 
style="fill: url(#plain); stroke: black;"/> 
<rect x="20" y="190" width="200" height="50" 
style="fill: url(#skewed-gradient); stroke: black;"/> 























图 8-16: 变换 图 案 和 渐变 

关于 渐变 和 图 案 的 最 后 一 个 注意 事项 是 ， 尽 管 这 些 例子 都 只 将 它们 应 用 于 形状 的 填充 区 
域 ， 但 其 实 它们 还 可 以 用 于 stroke。 这 样 就 可 以 为 对 象 生成 彩色 或 图 案 描 边 。 为 了 让 这 种 
效果 更 清晰 可 见 ， 通 常 要 设置 stroke-width 为 大 于 1 的 数字 。 








在 添加 stroke 的 时 候 ， 大 小 是 基于 objectBoundingBox 来 计算 的 。 因 为 水 
平 线 和 垂直 线 的 边界 框 的 宽度 或 高 度 默认 为 0， 所 以 当 图 案 和 崭 变 作用 于 这 
些 线条 的 时 候 ， 使 用 objectBoundingBox 单位 的 渐变 或 者 图 案 会 被 忽略 。 这 
意味 着 它们 完全 不 会 被 绘制 出 来 ， 除 非 在 样式 (style) 中 指定 备 选 笔画 值 ， 
比如 stroke: url(#rainbow) red。 


























如 果 图 案 或 渐变 定义 在 独立 的 文件 中 ， 设 置 备用 填充 和 笔画 选项 是 个 好 主 
意 ， 以 防 文件 不 能 加 载 或 者 SVG 阅读 器 不 支持 外 部 引用 。 

















如 果 说 每 张 图 片 都 在 讲述 一 个 故事 的 话 ， 那 么 加 上 一 些 文字 会 更 完美 。SVG 中 有 好 几 个 用 
于 在 图 像 中 加 入 文本 的 元 素 。 


9.1 文本 的 相关 术语 


在 介绍 <text> 元 素 〈 添 加 文本 的 主要 方法 ) 之 前 ， 我 们 需要 先 定义 一 些 术语 。 如 果 查 看 
SVG 的 规范 或 者 在 任何 图 像 系 统 中 处 理 文本 ， 都 会 看 到 这 些 术语 。 




















。 字符 
在 XML 文档 中 ， 字 符 是 指 带 有 一 个 数字 值 的 一 个 或 多 个 字 节 ， 数 字 值 与 Unicode 标准 
对 应 。 例 如 ， 字 母 g 是 Unicode 值 为 103 的 字符 。 








符号 (glyph) 是 指 字 符 的 视觉 呈现 。 每 个 字符 都 可 以 用 很 多 不 同 的 符号 来 呈现 。 图 9-1 
展示 了 用 两 种 不 同 的 符号 呈现 的 单词 “glyphs”。 注 意 开头 的 字母 5g， 同 一 个 字符 ， 但 符 
号 却 明 显 不 同 。 











glyphs glyphs 








图 9-1: 两 种 符号 


一 个 符号 可 能 由 多 个 字符 构成 。 一 些 字体 为 特定 的 字母 组 合 (如 朋 和 任 ) 准备 了 单独 的 符 
号 ,以 使 它们 更 好 看 ， 这 种 特性 叫 作 “ 连 字 ”(ligature)。 有 时候， 一 个 字符 也 可 能 由 几 个 
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符号 组 合 而 成 ， 比 如 打印 程序 可 能 会 组 合 符号 e 和 重音 符号 ( ) 来 打印 字符 E& (Unicode 值 
为 233)。 


。 字体 
字体 是 指 代表 某 个 字符 集合 的 一 组 符号 。 


一 套 字 体 中 的 所 有 符号 一 般 都 有 以 下 特性 。 


。 基线 、 上 坡度 、 下 坡度 
字体 中 的 所 有 符号 以 基线 对 齐 。 基 线 到 字体 中 最 高 字符 顶部 的 距离 称 为 上 坡度 
(ascent) ， 基 线 到 最 次 字符 底部 的 距离 称 为 下 坡度 〈descent) 。 字 符 的 总 高 度 为 上 坡度 和 
下 坡度 之 和 ， 也 称 为 em 高 度 。em-box 是 指 宽 度 为 em 高 度 的 方块 。 


。 大 写字 母 高 度 、x 高 度 
大 写字 母 高 度 (cap-height) 是 指 基 线 上 的 大 写字 母 的 高 度 , x 高 度 更 好 理解 ， 是 指 基 
线 到 小 写字 母 x 顶部 的 高 度 。x 高 度 通常 能 比 em 高 度 更 好 地 衡量 一 个 字体 的 尺寸 和 可 
读 性 。 

















图 9-2 中 标识 了 一 套 典型 的 罗马 字母 字体 中 的 基线 、 上 坡度 、 下 坡度 。 上 方 的 虚线 表示 大 
写字 母 高 度 ， 下 面 的 虚线 标记 了 x 高 度 。 











上 坡度 





基线 下 坡度 











图 9-2: 符号 的 度量 


9.2 ”<text> 元 素 的 基本 属性 


使 用 <text> 元 素 最 简单 的 情况 是 只 给 定 x 和 y 属性 的 值 ， 用 来 指定 元 素 内 容 的 第 一 个 字符 
的 基线 位 置 。 和 所 有 对 象 一 样 ， 文 本 的 默认 样式 是 黑色 填充 、 没 有 轮廓 。 这 刚好 是 你 想 要 
的 。 如 有 果 同 时 设置 轮廓 和 填充 ， 那 么 文本 会 变 粗 ， 看 着 并 不 舒服 。 如 有 果 只 设置 轮廓 样式 ， 
文本 看 起 来 就 会 很 舒服 ， 尤 其 是 将 笔画 宽度 设置 得 比较 小 的 时 候 。 示 例 9-1 展示 了 <text> 
的 位 置 属性 和 笔画 /填充 样式 ， 结 果 见 图 9-3。 



































示例 9-1: 文本 的 位 置 和 轮廓 


<!-- 参考 线 - -> 
<path d="M 20 10，20 120 M 10 30 100 30 M 10 70 100 70 
M 10 110 100 110" styLe= "stroke: gray;"/> 


<text x="20" y="30">Simplest Text</text> 





<text x="20" y="70" style="stroke: black;">0utlined/filled</text> 
<text x="20" y="110" style="stroke: black; stroke-width: 0.5; 
fill: none;">0utlined only</text> 








Simplest Text 
d /filled 














9-3: 文本 的 位 置 和 轮廓 


还 有 很 多 可 以 应 用 到 文本 上 的 属性 和 CSS 标准 中 是 一 样 的 。 下 面 是 一 些 在 Apache Batik 
1.7 阅读 器 中 实现 的 CSS 属性 和 对 应 的 值 。 它 们 也 适用 于 大 部 分 (但 不 是 所 有 ) 阅读 器 。 


font-family 

值 为 由 空格 分 隔 的 一 系列 字体 名 称 或 者 通用 字体 名 称 。 这 些 字体 并 不 会 全 部 生效 ， 而 
是 会 按 顺 序 依次 回 退 (fallback)， 即 SVG 阅读 器 会 按 从 前 往 后 的 顺序 使 用 它 识 别 出 的 
第 一 个 字体 。 通 用 字体 必须 放 在 最 后 。SVG 阅读 器 被 要 求 必 须 能 识别 出 通用 字体 名 称 ， 
并 且 拥 有 可 用 字体 。 通 用 字体 包括 serif、sans-serif、monospace、fantasy、cursive。 
serif 表示 衬 线 字体 ， 字 体 的 边缘 有 小 “ 勾 "， 而 sans-serif ( 非 衬 线 字体 ) 则 没有 。 在 
图 9-1 中 ， 左 边 的 单词 使 用 的 是 衬 线 字体 ， 右 边 的 单词 使 用 的 是 非 衬 线 字体 。 衬 线 字 体 
和 非 衬 线 字体 都 是 不 等 宽 的 ， 大 写字 母 M 和 大 写字 母 I 的 宽度 是 不 同 的 。 而 monospace 
(等 宽 字体 ) 则 不 管 有 没有 衬 线 ， 所 有 符号 的 宽度 都 一 样 ， 就 像 打 字 机 打出 来 的 那样 。 
fantasy 和 cursive 代表 的 默认 字体 在 不 同 的 SVG 阅读 器 上 可 能 会 有 很 大 不 同 。 











font-size 

如 果 有 多 行文 本 的 话 ，font-size 的 值 为 相 邻 的 两 条 基线 的 距离 。( 在 SVG 中 ， 开 
发 者 必须 自己 定位 多 行文 本 ， 所 以 这 个 概念 有 点 抽象 .) 如 果 指 定 了 单位 ， 比 如 
style="font-size: 12pt"， 则 在 泻 染 前 字体 大 小 会 被 转换 为 用 户 坐 标 ， 所 以 它 可 能 会 受 
变换 和 SVG viewBox 影响 。 如 果 你 使 用 相对 单位 (em、ex 或 者 百分比 )， 这 些 单位 会 相 
对 于 继承 的 字体 大 小 进行 计算 。 








font-weight 

最 常用 的 两 个 值 为 boLd 和 normal。 当 需要 将 一 堆 设 置 了 style="font-weight: bold" 的 
文本 中 的 一 部 分 变 为 非 粗 体 时 ， 就 需要 设置 值 为 normal。 

font-style 


最 常用 的 两 个 值 为 italic (和 斜体) 和 normal。 


text-decoration 


可 能 的 值 为 none、underLine (下 划 线 )、overline (上 划 线 )、Line-through (删除 线 )。 
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。 Word-spacing 
该 属性 的 值 为 一 个 长 度 ， 可 以 显 式 带 上 单位 〈 如 pt)， 也 可 以 使 用 用 户 坐 标 。 正 值 将 增 
大 单词 乙 间 的 间距 ，normat 将 保持 正常 间距 ， 负 值 会 减 小 单词 之 间 的 间距 。 指 定 的 值 
将 与 正常 间距 相 加 。 











。 letter-spacing 
该 属性 的 值 为 一 个 长 度 ， 可 以 显 式 带 上 单位 〈 如 pt)， 也 可 以 使 用 用 户 坐 标 。 正 值 将 增 
大 字母 乙 间 的 间距 ，normat 将 保持 正常 间距 ， 负 值 会 减 小 字母 之 间 的 间距 。 指 定 的 值 
将 与 正常 间距 相 加 。 























示例 9-2 使 用 了 这 些 属性 ， 结 果 见 图 9-4， 这 些 效果 你 可 以 在 任何 字 处 理 软件 中 看 到 。 
示例 9-2: 文本 样式 


<g style="font-size: 18pt"> 
<text x="20" y="20" style="font-weight:bold;">bold</text> 
<text x="120" y="20" style="font-style:italic;">italic</text> 
<text x="20" y="60" style="text-decoration:underline;">under</text> 
<text x="120" y="60" style="text-decoration:overline;">over</text> 
<text x="200" y="60" style="text-decoration:line-through;">through</text> 
<text x="20" y="90" style="word-spacing: 10pt;">more word space</text> 
<text x="20" y="120" style="word-spacing: -3pt;">less word space</text> 
<text x="20" y="150" style="letter-spacing: Spt;">wide letter space</text> 
<text x="20" y="180" 

style="letter-spacing: -6pt;">narrow letter space</text> 























</g> 

bold iialic 
under over threugh 
more word space 
less word space 
wide letter space 
narrow letter space 

图 9-4; 文本 样式 


9.3 ”文本 对 齐 


<text> 元 素 让 你 指定 了 起 始点 ， 但 是 你 并 不 能 事先 知道 它 的 终点 。 这 使 得 让 文本 居中 对 章 
或 者 右 对 齐 变 得 很 困难 。 我 们 可 以 使 用 text-anchor 属性 来 指定 文本 坐标 生效 的 位 置 ， 它 
的 值 可 以 是 start、middle 或 者 end。 如 果 文 字 是 从 左 向 右 书写 的 ， 这 三 个 值 分 别 表示 左 对 
齐 、 居 中 对 齐 和 右 对 齐 。 如 果 文 字 的 书写 方向 不 是 从 左 到 右 ( 见 9.7 节 )， 则 会 有 不 同 的 效 
果 。 示 例 9-3 展示 了 三 个 文本 ， 它 们 的 x 坐标 都 是 100， 但 是 text-anchor 值 不 一 样 。 为 了 
看 得 更 清晰 ， 图 上 画 了 一 条 参考 线 ， 见 图 9-5。 
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示例 9-3: text-anchor 的 使 用 
http://oreillymedia.github.io/sve-essentials-examples/ch09/text alienment.html 


<g style="font-size: 14pt;"> 
<path d="M 100 10 100 100" style="stroke: gray; fill: none;"/> 
<text x="100" y="30" style="text-anchor: start">Start</text> 
<text x="100" y="60" style="text-anchor: middle">Middle</text> 
<text x="100" y="90" style="text-anchor: end">End</text> 


</g> 





tart 
Middle 
End 











9-5: 使 用 text-anchor 的 效果 


9.4 <tspan> 元 素 


无 法 提前 预知 文本 元 素 的 长 度 带 来 的 另 一 个 问题 是 ， 很 难为 一 个 字符 串 应 用 不 同 的 文本 属 
性 ， 比 如 一 个 句子 中 穿插 着 斜体 、 正 常 字体 和 粗 体 。 如 果 只 使 用 <text> 元 素 ， 则 需要 反 
复试 验 以 确定 将 这 些 不 同 格式 的 字符 串 放 在 什么 位 置 。 为 了 解决 这 个 问题 ，SVG 提供 了 
<tspan> 元 素 。 与 (X)HTML 中 的 <span> 元 素 类 似 ，<tspan> 元 素 可 以 嵌 套 在 文本 内 容 中 ， 
并 可 以 改变 其 中 文本 的 样式 。<tspan> 元 素 知 道 文 本 的 位 置 ， 所 以 不 需要 你 操心 。 示 例 9-4 
的 效果 如 图 9-6。 


示例 9-4: 使 用 <tspan> 改变 文本 样式 
<text x="10" y="30" style="font-size:12pt;"> 
Switch among 
<tspan style="font-style:italic">italic</tspan>, normal, 
and <tspan style="font-weight:bold">bold</tspan> text. 
</text> 























Switch among /Mac normal, and bold text. 











9-6: 使 用 <tspan> 改变 文本 样式 


除了 可 以 改变 像 字体 大 小 、 颜 色 、 字 重 之 类 的 表现 样式 外 ， 还 可 以 在 <tspan> 上 应 用 一 些 
属性 来 改变 某 个 字母 或 者 某 些 字母 的 位 置 。 比 如 ， 如 果 你 想 应 用 上 标 或 者 下 标 样式 ， 可 以 
使 用 dy 属性 来 改变 字母 的 偏 移 量 。 这 个 属性 值 会 被 加 到 当前 字符 的 垂直 位 置 上 ， 并 持续 
生效 ， 即 使 在 <tspan> 元 素 关 闭 后 仍然 有 效 。 这 个 属性 允许 设置 负 值 。 另 一 个 相似 的 属性 
是 dx， 会 改变 字母 在 水 平方 向 上 的 偏 移 量 。 示 例 9-5 使 用 垂直 偏 移 量 来 创建 “ 掉 落 的 字 
母 "， 效 果 见 图 9-7。 
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示例 9-5: 使 用 dy 改变 文本 的 垂直 位 置 
<text x="10" y="30" style="font-size:12pt;"> 
F <tspan dy="4">a</tspan> 
<tspan dy="8">l</tspan> 
<tspan dy="12">l</tspan> 
</text> 














9-7: 使 用 dy 改变 文本 的 垂直 位 置 


如 果 你 想 使 用 绝对 位 置 来 设 定 偏 移 量 ， 而 不 是 相对 元 素 本 身 的 偏 移 量 来 设置 ， 要 使 用 x 和 
y 属性 。 在 处 理 多 行文 本 时 使 用 这 两 个 属性 很 方便 。 在 9.9 节 中 我 们 将 看 到 ，SVG 不 会 处 
理 换 行 符 ， 不 会 自动 断 行 ， 所 以 你 需要 手动 为 每 一 行 设置 x 属性 值 ， 并 使 用 y 或 者 dy 来 
垂直 定位 。 你 应 该 始终 在 <text> 元 素 中 使 用 <tspan>， 以 便 将 相关 联 的 行进 行 分 组 ， 这 样 
不 仅 可 以 将 它们 作为 一 个 单位 一 起 选中 ， 也 会 使 文档 更 加 结构 化 。 示 例 9-6 展示 了 Edward 
Lear 的 The Owl and the Pussycat 这 首 诗 中 的 一 节 ， 使 用 了 <tspan> 元 素 ， 并 使 用 了 绝对 x 
坐标 和 y、dy 属性 进行 定位 。 



































示例 9-6: 使 用 <tspan> 进行 绝对 定位 
<text x="10" y="30" style="font-size:12pt;"> 
They dined on mince, and slices of quince, 
<tspan x="20" y="50">Which they ate with a 
runcible spoon;</tspan> 
<tspan X="10" y="70">And hand in hand, on the edge 
of the sand,</tspan> 
<tspan X="20" dy="20">They danced by the light of the moon.</tspan> 
</text> 


图 9-8 中 没有 明显 的 证 据 证 明 所 有 的 文本 都 在 同一 个 <text> 元 素 中 ， 但 请 对 我 们 的 代码 有 
信心 ， 它 们 确实 是 在 一 起 的 。 








They dined on mince, and slices of quince, 
Which they ate with a runcible spoon.; 

And hand in hand, on the edge of the sand, 
They danced by the light of the moon. 











图 9-8: 绝对 定位 的 诗 
你 也 可 以 使 用 rotate 属性 对 <tspan> 中 的 单个 字母 或 者 一 些 字母 进行 旋转 ， 它 的 值 是 以 度 
为 单位 的 角度 值 。 


如 果 你 需要 一 次 修改 多 个 字母 的 位 置 ， 可 以 为 x、y、dx、dy 和 rotate 属性 一 次 设置 一 系 
列 的 值 。 你 指定 的 值 将 会 按 顺 序 一 个 一 个 应 用 到 <tspan> 中 的 字母 上 。 见 示例 9-7。 




















示例 9-7: 在 <tspan> 中 为 dx、dy、rotate 设置 多 个 值 
<text x="30" y="30" style="font-size:14px">It's 
<tspan dx="0 4 -3 5 -4 6" dy="0 -3 73 -2 -8" 

rotate="5 10 -5 -20 0 15">shaken</tspan>, 
not stirred. 
</text> 





注意 在 图 9-9 中 ,dx 和 dy 在 <tspan> 关闭 后 仍然 有 效 ， 在 </tspan> 之 后 的 文本 的 偏 移 量 
和 shaken 中 的 n 是 一 样 的 。 后 面 的 文本 并 没有 回 到 <tspan> 中 第 一 个 字母 的 基线 。 























It'ss hye n, Dot stirred. 











9-9: 多 个 垂直 和 水 平 偏 移 量 值 


尽管 可 以 使 用 dy 属性 来 产生 上 标 和 下 标 ， 但 使 用 baseLine-shift 属性 会 更 简单 ， 见 示例 
9-8。 这 个 属性 的 值 可 以 为 super 和 sub。 你 也 可 以 指定 一 个 长 度 值 ， 如 9.5em， 或 者 相对 
字体 尺寸 进行 计算 的 百分比 。baseline-shift 的 影响 范围 仅 限 于 它 所 在 的 <tspan> 元 素 。 

















示例 9-8: baseline-shift 的 使 用 


<text x="20" y="25" style="font-size: 12pt;"> 

C<tspan style="baseline-shift: sub;">12</tspan> 
H<tspan style="baseline-shift: sub;">22</tspan> 
O<tspan style="baseline-shift: sub;">11</tspan> (sugar) 
</text> 


<text x="20" y="70" style="font-size: 12pt;"> 
6.02 x 10<tspan baseline-shift="super">23</tspan> 
(Avogadro's number) 

</text> 


汝 
Ei 


9-10 中 的 上 下 标 数字 似乎 有 点 大 。 设 置 一 个 font-size 属性 应 该 会 更 好 ， 不 过 我 们 
望 用 这 个 例子 来 说 明 一 个 问题 。 








Cl12zH22011 (sugar) 


6.02 x 1023(Avogadros number) 











9-10: 上 下 标 


9.5 设置 文本 长 度 


尽管 之 前 说 过 ， 我 们 无 法 提前 知道 一 段 文本 的 结束 位 置 ， 但 可 以 使 用 textLength 属性 
显 式 设 置 文本 的 长 度 。SVG 会 将 文本 调整 到 指定 的 长 度 。 在 调整 的 时 候 ， 可 以 只 调整 
字符 之 间 的 间距 ， 保 持 字 符 本 身 大 小 不 变 ， 也 可 以 同时 调整 字符 的 间距 和 字符 本 身 的 大 
小 。 如 果 你 只 想 调 整 字符 的 间距 ， 可 以 将 LengthAdjust 属性 值 设 为 spacing (上 默认 值 )。 
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如 果 你 希望 SVG 同时 调整 字符 间距 和 字符 本 身 的 大 小 ， 则 将 LengthAdjust 值 设置 为 
spacingAndGLyphs。 示 例 9-9 使 用 了 这 些 属性 ， 效 果 见 图 9-11。 














示例 9-9: textLength 和 LengthAdjust 的 使 用 
http://oreillymedia.github.io/sve-essentials-examples/ch09/text length.html 


<g style="font-size: 14pt;"> 
<path d="M 20 10 20 70 M 220 10 220 70" style="stroke: gray;"/> 
<text x="20" y="30" 
textLength="200" lengthAdjust="spacing">Two words</text> 
<text x="20" y="60" 
textLength="200" lengthAdjust="spacingAndGlyphs">Two words</text> 


<text x="20" y="90">Two words 
<tspan style="font-size: 10pt;">(normal length)</tspan></text> 


<path d="M 20 100 20 170 M 100 100 100 170" style="stroke: gray;"/> 
<text x="20" y="120" 

textLength="80" lengthAdjust="spacing">Two words</text> 
<text x="20" y="160" 

textLength="80" lengthAdjust="spacingAndGlyphs">Two words</text> 
</g> 





Two words 
TvvO vvord 


Two words (normal length) 
Two wor 


Two word 











图 9-11: textLength 和 LengthAdjust 不 同 值 的 效果 


9.6 ”纵向 文本 


当 使 用 SVG 创建 报表 、 图 形 或 者 表格 的 时 候 ， 经 常会 希望 文本 标签 能 沿 着 垂直 坐标 轴 排 
列 。 要 实现 这 样 的 效果 ， 一 种 方法 是 使 用 变换 (transform) 将 文本 旋转 90 度 。 另 一 种 方 
法 是 将 writing-mode 属性 值 设 为 tb (top to bottom， 从 上 到 下 )。 





有 时候 ， 也 会 希望 文本 垂直 排列 时 字母 本 身 仍然 是 横向 显示 。 


示例 9-10 通过 将 glyph-orientation-vertical 属性 值 设 为 6 实现 了 这 样 的 效果 。( 默 认 值 
为 90， 即 将 纵向 排列 的 文本 旋转 90 度 。) 在 图 9-12 中 ， 这 个 属性 值 会 使 得 文本 间距 显得 
有 点 不 自然 ， 可 以 为 letter-spacing 设置 一 个 小 的 负 值 解决 这 个 问题 。 








示例 9-10: 纵向 文本 


<text x="10" y="20" transform="rotate(90,10,20)">Rotated 90</text> 





<text x="50" y="20" style="writing-mode: tb;">Writing Mode tb</text> 
<text x="90" y="20" style="writing-mode: tb; 
glyph-orientation-vertical: 0;">Vertical zero</text> 














如 果 你 实践 了 这 些 例子 ， 可 能 会 发 现 一 些 特性 (baseline-shift、 间 距 、 纵 向 文本 ) 在 一 
些 阅 读 嚣 中文 持 得 很 差 。 所 以 最 好 在 你 希望 支持 的 SVG 阅读 器 中 测试 自己 的 图 形 。 
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图 9-12: 纵向 文本 


9.7 国际 化 和 文本 


如 果 你 的 图 形 中 的 文本 需要 被 翻译 为 多 种 语言 ， 那 么 SVG 对 Unicode 的 支持 和 在 一 个 文档 
中 显示 各 种 语言 的 能 力 ， 能 让 你 免 去 为 每 门 语言 创建 一 个 文档 的 麻烦 。 























9.7.1 Unicode 和 双向 语言 


XML 是 基于 Unicode 标准 的 (完整 的 文档 见 Unicode 财团 网 站 : http://www.unicode. 
org/)。 这 使 得 文本 可 以 以 阅读 器 软件 支持 的 任何 语言 来 显示 ， 如 图 9-13 所 示 。 有 一 些 语 
言 ， 如 阿拉 伯 语 、 希 伯 来 语 ， 书 写 方向 是 从 右 到 左 ， 所 以 当 这 些 语言 的 文本 与 从 左 到 右 
书写 的 语言 《如 英语 ) 混在 一 起 时 ， 这 些 文本 就 是 双向 的 〈bidirectional) ， 简 称 bidi。 系 
统 软件 知道 每 个 字符 的 书写 方向 ， 并 正确 地 计算 出 它们 的 位 置 。 示 例 9-11 中 重 设 了 文本 
的 方向 ， 将 direction 属性 设 为 了 rtL， 表 示 从 右 到 左 (right-to-left) 。 如 果 你 想 改变 希 伯 
来 文 或 者 阿拉 伯 文 文本 的 方向 ， 则 需要 将 direction 属性 设 为 Ltr, 表示 从 左 到 右 (left-to- 
right) 。 你 还 需要 将 unicode-bidi 属性 值 设 为 btdi-override， 来 显 式 重 设 底层 的 Unicode 
双向 文本 算法 。 




















示例 9-11: 使 用 Unicode 的 国际 化 文本 


<g style="font-size: 14pt;"> 
<text x="10" y="30">Greek: </text> 


<text x="100" y="30"> 
apBv5s 
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</text> 


<text x="10" y="50">Russian:</text> 
<text x="100" y="50"> 

a6Bra 
</text> 


<text x="10" y="70">Hebrew:</text> 
<text x="100" y="70"> 

NTAN (written right to left) 
</text> 


<text x="10" y="90">Arabic:</text> 
<text x="100" y="90"> 

3 T » |(written right to Left) 
</text> 


<text x="10" y="130"> 
This is 
<tspan style="direction: rtl; unicode-bidi: bidi-override; 
font-weight: bold;">right-to-left</tspan> 
writing. 
</text> 
</g> 





Greek: Byde 

Russian: abern 

Hebrew: mTaN (written right to left) 
Arabic: wl (written right to left) 


This is tfel-ot-thgir writing. 











图 9-13; 多 种 语言 的 文本 


9.7.2 ”<switch> 元 素 


在 同一 个 文档 中 显示 多 种 语言 的 能 力 在 一 些 场 景 下 很 有 用 ， 比 如 创建 一 个 迎接 国际 游客 的 
小 册子 。 有 了 时 候 你 会 希望 创建 一 个 双语 文档 ， 比 如 西班牙 语 和 俄语 。 使 用 西班牙 语系 统 软 
件 的 人 看 到 西班牙 语文 本 ， 而 使 用 俄语 系统 软件 的 人 看 到 俄语 文本 。 


SVG 通过 <switch> 元 素 提供 了 这 种 能 力 。 这 个 元 素 会 搜索 所 有 的 子 节点 ， 直 到 发 现 
systemLanguage 属性 值 与 用 户 正在 使 用 的 软件 的 语言 设置 相符 的 节点 。'systemLanguage 属 
性 的 值 是 一 个 语言 名 称 或 者 使 用 逗号 分 隔 的 语言 名 称 列表 。 语 言 名 称 要 么 是 两 个 字母 的 语 
言 代 码 ， 比 如 ru 代表 俄语 ， 要 么 是 语言 代码 加 上 国家 代码 ， 用 于 指定 某 个 亚 种 语言 ， 比 
如 fr-CA 代表 加 拿 大 法 语 ， 而 fr-CH 代表 瑞士 法 语 。 


























注 1: 元 素 也 可 用 于 其 他 测试 。2.3.1 节 中 介绍 了 如 何 用 元 素 检测 对 某 些 特性 的 支持 。 如 果 在 元 素 的 子 节 点 
上 使 用 多 个 测试 属性 ， 则 它们 全 都 必须 匹配 所 要 显示 的 内 容 。 


























一 旦 找到 匹配 的 子 市 点 ， 则 这 个 节点 所 有 的 子 市 点 都 会 被 显示 出 来 。<switch> 元 素 其 他 的 
子 证 点 则 会 被 忽略 。 示 例 9-12 展示 了 以 英 式 英语 、 美 式 英 语 、 西 班 牙 语 和 俄语 显示 的 文 
本 。 如 果 语 言 代码 能 匹配 上 ， 则 认为 找到 匹配 节点 ， 国 家 代码 只 是 为 了 进一步 确认 ， 所 以 
英 式 英语 必须 放 在 最 前 面 。 








示例 9-12: <switch> 元 素 的 使 用 
<circle cx="40" cy="60" r="20" style="fill: none; stroke: black;"/> 
<g font-size="12pt"> 
<switch> 
<g systemLanguage="en-UK"> 
<text x="10" y="30">A circle</text> 
<text x="10" y="100">without coLour .</text> 
</g> 
<g systemLanguage="en"> 
<text x="10" y="30">A circle</text> 
<text x="10" y="100">without color.</text> 
</g> 
<g systemLanguage="es"> 
<text x="10" y="30">Un circulo</text> 
<text x="10" y="100">sin color.</text> 
</g> 
<g systemLanguage="ru"> 
<text x="10" y="30">Kpyr</text> 
<text x="10" y="100">6e3 CBeTa.</text> 
</g> 
</switch> 
</g> 


9-14 是 示例 9-12 在 不 同 的 语言 设置 下 的 截图 。 通 常情 况 下 应 该 再 提供 一 个 回 退 内 容 
(在 <switch> 元 素 内 容 的 最 后 ， 放 置 一 个 不 写 systemLanguage 属性 的 分 组 ) 以 便 在 匹配 不 
到 的 时 候 显 示 。 理 想 情 况 下 ， 你 应 该 为 用 户 提供 一 种 从 可 用 语言 中 选择 其 一 的 方式 。 











A circle A circle 


() 0 


without colour. | without color. 








Un circulo Kpyr 
sin color. be3 CBeTa. 











9-14: 不 同 语言 设置 下 的 截图 


9.7.3 ”使 用 自 定义 字体 


有 时 候 你 需要 一 些 Unicode 中 没有 的 特殊 符号 ， 或 者 希望 只 使 用 Unicode 字符 中 的 一 部 分 ， 这 
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样 就 不 用 安装 整个 字体 文件 。 如 示例 9-15， 仅 仅 需要 2000 多 个 韩文 字符 中 的 几 个 。 你 可 以 按 
照 附 录 忆 制作 一 个 自 定义 字 体 ， 然 后 为 <font> 起 始 标 签 设置 一 个 唯一 的 i。 下 面 是 包含 从 
Batang TrueType 字体 中 提取 的 6 个 韩文 字符 的 字体 文件 的 相关 部 分 ， 文 件 名 为 kfont.svg。 








<font id="kfont-defn" horiz-adv-x="989" vert-adv-y="1200" 
vert-origin-y="0"> 
<font-face font-family="bakbatn" 
units-per-em="1000" 
panose-1="2360011111" 
ascent="800" descent="-200" baseline="0"/> 
<missing-glyph horiz-adv-x="500" /> 
<!-- 字符 定义 在 这 里 --> 
</font-face> 
</font> 




















对 鱼 - 厂 攻 岂可 








9-15: 使 用 外 部 字体 的 韩文 字符 


一 旦 字体 文件 提取 完成 后 ， 示 例 9-13 就 可 以 从 这 个 外 部 文件 中 引用 字体 。 为 了 保持 一 致 
性 ， 这 个 SVG 文件 中 font-family 的 值 应 该 与 外 部 文件 保持 一 致 。 


示例 9-13: 外 部 字体 的 使 用 
<defs> 
<font-face font-family="bakbatn"> 
<font-face-src> 
<font-face-uri xlink:href=:"kfont.svg#kfont-defn"> 
<font-face-format string="svg" /> 
</font-face-uri> 
</font-face-src> 
</font-face> 
</defs> 


<text font-size="28" x="20" y="40" 
style="font-family: bakbatn, serif;"> 
代 倒 - 叫 计 昌 己 
</text> 





SVG 字体 目前 不 被 正 浏 览 器 支持 (包括 正 11)， 也 不 被 Firefox 浏览 器 支 
持 〈 版 本 30)。 在 这 些 浏 览 器 中 ， 你 可 以 再 包含 一 个 <font-face-src> 元 
素 ， 指 定 一 个 不 同 格式 的 字体 URI。 或 者 ， 你 可 以 使 用 只 有 一 个 name 属性 
的 <font-face-name> 元 素 ， 来 指定 系统 字体 。 这 些 元 素 与 等 价 的 CSS font- 
face 属性 有 相同 的 写法 。 











如 果 你 指定 的 字体 全 部 不 能 使 用 ， 浏 览 器 会 尝试 在 系统 字体 中 寻找 一 个 能 够 
显示 文本 中 使 用 的 字符 的 字体 。 








9.8 文本 路 径 


文本 并 不 一 定 要 沿 垂直 或 者 水 平 的 直线 排列 。 它 可 以 治 任何 抽象 路 径 排列 ， 只 需要 简单 
地 将 文本 放 在 <textPath> 元 素 中 ， 然 后 使 用 xLink:href 属性 引用 一 个 之 前 已 经 定义 好 的 
<path> 元 素 。 字 母 会 被 旋转 到 与 曲线 垂直 的 方向 “站 立 ”( 即 基线 是 曲线 的 切线 ) 。 沿 光 清 
连续 曲线 排列 的 文本 比 沿 含有 锐角 或 者 不 连续 的 路 径 排 列 的 文本 更 易 读 。 





在 <textPath> 元 素 中 指定 <path> 并 不 会 自动 将 路 径 显 示 出 来 。 在 示例 9-14 
中 ，<path> 在 <defs> 中 定义 ， 它 们 通常 不 会 被 显示 出 来 。 示 例 中 使 用 了 
<use> 元 素来 显示 这 些 线 。 








示例 9-14: textPath 示例 
http://oreillymedia.github.io/svg-essentials-examples/ch09/text path.html 


<defs> 

<path id="curvepath" 
d="M30 40 C 50 10, 70 10, 120 40 S 150 0, 200 40" 
style="stroke: gray; fill: none;"/> 


<path id="round-corner" 
d="M250 30 L 300 30 A 30 30 0 0 1 330 60 L 330 110" 
style="stroke: gray; fill: none;"/> 


<path id="sharp-corner" 
d="M 30 110 100 110 100 160" 
style="stroke: gray; fill: none;"/> 


<path id="discontinuous" 
d="M 150 110 A 40 30 0 1 0 230 110 M 250 110 270 140" 
style="stroke: gray; fill: none;"/> 

</defs> 


<g style="font-family: 'Liberation Sans'; 

font-size: 10pt;"> 

<use xlink:href="#curvepath"/> 

<text> 
<textPpath xlink:href="#curvepath"> 
Following a cubic Bézier curve. 
</textPath> 

</text> 


<use xlink:href="#round-corner"/> 
<text> 
<textPath xlink:href="#round-corner"> 
Going 'round the bend 
</textPath> 
</text> 
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<use xlink:href="#sharp-corner"/> 
<text> 
<textPath xlink:href="#sharp-corner"> 
Making a quick turn 
</textPath> 
< /text> 


<use xlink:href="#discontinuous"/> 
<text> 
<textPath xlink:href="#discontinuous"> 
Text along a broken path 
</textPath> 
</text> 
</g> 











示例 9-14 的 结果 见 图 9-16。 图 9-17 展示 了 不 将 曲线 画 出 来 时 文本 的 样子 。 











图 9-16: 沿 着 路 径 排 列 的 文本 ( 画 出 路 径 ) 





Wing a 
ND Cwp,. Kve. Going 'rou 
《9 ee oO 9 Touno, 


puaq aw 


Makinga qu_ 





uny Po! 
EE 
六 
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re] 
LL 
所 





图 9-17: 沿 着 路 径 排列 的 文本 (未 画 出 路 径 ) 





你 可 以 通过 设置 startoffset 属性 (百分比 或 长 度 ) 来 调整 文本 在 路 径 上 开始 的 位 置 。 比 
如 startoffset="25%" 表示 文本 起 始 位 置 在 路 径 的 四 分 之 一 处 ，startoffset="30" 表示 文 
本 起 始 位 置 在 路 径 开 始 30 个 用 户 单位 后 。 如 果 你 希望 文本 相对 路 径 居 中 ， 如 示例 9-15 
中 所 示 ， 只 需要 在 <text> 元 素 上 设置 textanchor="middle" 并 在 <textPath> 元 素 上 设置 
startoffset="50%" 即 可 。 超 出 路 径 结尾 处 的 文本 会 被 截断 ， 只 会 显示 左边 的 部 分 ， 如 图 
9-18 所 示 。 














示例 9-15: 文本 的 长 度 和 起 始 位 置 
http://oreillymedia.github.io/sve-essentials-examples/ch0O9/start_offset.html 


<defs> 
<path id="short-corner" transform="translate(40,40)" 











d="MO00L300A30300016030L60 60" 
style="stroke: gray; fill: none;"/> 


<path id="long-corner" transform="translate(140,40)" 
d="MO OLS500A303000180 30L 80 80" 
style="stroke: gray; fill: none;"/> 
</defs> 


<g style="font-family: 'Liberation Sans'; font-size: 12pt"> 
<use xlink:href="#short-corner"/> 
<text> 
<textPath xlink:href="#short-corner"> 
This text is too long for the path. 
</textPath> 
</text> 


<use xlink:href="#long-corner"/> 
<text style="text-anchor: middle;"> 
<textPpath xlink:href="#long-corner" startOffset="50%"> 
centered 
</textPath> 
</text> 
</g> 














图 9-18: 长 文本 和 起 始 位 置 的 效果 


9.9 ”空白 和 文本 


你 可 以 通过 改变 xml:space 属性 的 值 来 改变 SVG 处 理 文本 中 空白 字符 (空格 、 制 表 符 、 换 
行 符 ) 的 方式 。 如 果 指 定 值 为 defautt (默认 值 )， 则 SVG 会 按 如 下 规则 处 理 空白 字符 : 


。 删除 所 有 换行 符 

。 将 所 有 制 表 符 转换 为 空格 

。 删除 首尾 空格 

将 任意 数量 的 连续 空格 换 为 一 个 空格 


如 果 使 用 \t 表示 制 表 符 ，\n 表示 换行 符 ， 下 划 线 表示 空格 ， 则 下 面 的 字符 串 : 






























































\n\n__abc \t\t def _\n\n__ghi 


会 泻 染 成 
abc_def_ghi 
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xmL:space 的 另 一 个 值 是 preserve， 使 用 该 值 时 ，SVG 只 会 简单 地 将 所 有 换行 符 和 制 表 符 
换 为 空格 (保留 首尾 空格 )， 然 后 显示 出 来 。 同 样 的 文本 : 











\n\n___abc_\t\t_ def \n\n__ghi 
会 泻 染 成 这 样 : 


abc def ghi. 


SVG 对 空白 字符 的 处 理 与 HTML 不 完全 一 样 。SVG 的 默认 处 理 方式 会 去 
掉 所 有 的 换行 符 ， 而 HTML 会 将 文本 内 容 的 换行 符 转 换 为 空格 。SVG 的 
preserve 值 将 所 有 换行 符 转 换 为 空格 ， 而 HTML 的 <pre> 元 素 并 不 这 么 处 
理 。 在 SVG1.0 中 无 法 产生 新 行 ， 这 使 得 人 们 感到 很 困惑 ， 但 SVG 毕 觉 是 面 
向 图 像 显 示 的 ， 而 不 是 像 XHTML 那样 面向 文本 内 容 ， 所 以 也 可 以 理解 。 























9.10 ”案例 学 习 : 为 图 形 添 加 文本 


图 9-19 为 韩国 国旗 添加 了 韩文 和 英文 文本 。 文 本 相对 椭圆 路 径 居 中 。 与 示例 9-16 相 比 ， 
新 增 的 代码 以 粗 体 显示 。 











示例 9-16: 文本 案例 学 习 
<defs> 
<font-face font-family="bakbatn"> 
<font-face-src> 
<font-face-uri xlink:href="kfont.svg#kfont-defn"> 
<font-face-format string="svg" /> 
</font-face-uri> 
</font-face-src> 
</font-face> 


<path id="upper-curve" d="M -8 154 A 162 130 0 1 1 316 154"/> 
<path id="lower-curve" d="M -21 154 A 175 140 0 1 0 329 154"/> 
</defs> 


<ellipse cx="154" cy="154" rx="150" ry="120" style="fill: #999999;"/> 
<ellipse cx="152" cy="152" rx="150" ry="120" style="fill: #cceeff;"/> 




















<!-- 浅 红 色 大 半圆 填充 符号 的 上 半 部 分 ,其 下 方 “ 淄 入 "符号 左下 方 的 浅 红色 小 半圆 --> 
<path d="M 302 152 A 150 120, 0, 1, 0, 2 152 
A 75 60, 0, 1, 0, 152 152" style="fill: #ffcccc;"/> 














<!-- 浅 蓝 色 小 半圆 ,填充 符号 右上 方 --> 
<path d="M 152 152 A 75 60, 0, 1, 1, 302 152" 
style="fill: #cceeff;"/> 








<text font-family="bakbatn, serif" 
style="font-size: 24pt; text-anchor: middle;"> 
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<textpPath xlink:href="#upper-curve" startOffset="50%"> 
训 旱 - 器 计 刚 续 
</textPath> 
</text> 


<text style="font-size: 14pt; text-anchor: middle;"> 
<textpPath xlink:href="#lower-curve" start0Offset="50%"> 
Seoul - Republic of Korea 
</textpPath> 

</text> 

















图 9-19: 图 形 上 添加 的 沿路 径 排列 的 文字 





文本 | 121 








有 时 候 我 们 可 能 不 想 看 到 完整 的 图 片 。 例 如 ， 可 能 想 要 绘制 一 张 像 是 通过 双 简 望远镜 或 者 
锁 孔 看 到 的 图 片 ， 而 镜 简 和 锁 孔 之 外 的 所 有 部 分 都 是 不 可 见 的 。 或 者 ， 想 要 绘制 一 张 仿佛 
是 通过 半 透 明 的 幕布 看 到 的 图 片 。SVG 中 使 用 裁剪 和 蒙 版 来 实现 这 些 效果 。 


10.1 坟 剪 路 径 

创建 SVG 文档 时 ， 可 以 通过 指定 感 兴趣 区 域 的 宽度 和 高 度 建 立 视 口 。 这 会 变 成 默认 的 入 
剪 区 域 ， 任 何 绘制 在 该 范围 外 部 的 部 分 都 不 会 显示 。' 你 还 可 以 使 用 <cttppath> 元 素来 建 
立 自己 的 裁剪 区 域 。 











最 简单 的 情形 是 建立 一 个 矩形 裁剪 路 径 。 在 <cLipPath> 元 素 内 是 想 要 裁剪 的 <rect>。 因 
为 我 们 只 想 要 它 的 坐标 ， 所 以 这 个 矩形 本 身 不 会 显示 。 因 此 ， 可 以 在 <clipPath> 元 素 内 
随意 指定 填充 和 笔画 风格 。 应 用 时 在 要 裁剪 的 对 象 上 添加 clip-path 样式 属性 ， 值 引用 到 
<clipPath> 元 素 即 可 。 注 意 这 个 属性 带 有 连 字 符 且 不 是 大 写 的 ， 裁 前 元 素 则 是 有 大 写字 母 
且 不 带 连 字符 。 示 例 10-1 中 ， 要 裁剪 的 对 象 是 第 1 章 中 的 猫 图 像 。 结 果 如 图 10-1 所 示 。 


示例 10-1: 裁剪 矩形 路 径 
htip://oreillymedia.github.io/sve-essentials-examples/ch10/clip path.html 





























<svg width="350" height="200" viewBox="0 0 350 200" 
xmlns="http://www.w3.0rg/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink"> 





注 1: 可 以 通过 设置 overflow 样式 属性 为 visible 改变 这 一 行为 。 
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<defs> 
<CLiLpPath id="rectClip"> 
<rect id="rect1" x="15" y="15" 
width="40" height="45" 
style="stroke: gray; fill: none;"/> 
</cLipPath> 
</defs> 


<!-- 裁剪 矩形 --> 
<use xlink:href="minicat.svg#cat" 
style="clip-path: url(#rectClip);"/> 


<!-- 引用 图 像 , 显 示 整 个 图 像 和 裁剪 区 域 轮廓 --> 
<g transform="translate(100,0)"> 
<use xlink:href="#rect1"/> <!-- 显示 裁剪 矩形 --> 
<use xlink:href="minicat.svg#cat"/> 
</g> 
</svg> 








[ 











10-1， 简单 的 矩形 裁 衣 


hl 








<cLipPath>， 顾 名 思 义 ， 应 该 可 以 让 我 们 指定 任意 形状 的 路 径 用 于 裁剪 。 事 实 上 ， 
<clipPath> 元 素 也 确实 可 以 包含 任意 数量 的 基本 形状 、<path> 元 素 或 者 <text> 元 素 。 示 
例 10-2 展示 了 一 组 按照 曲线 路 径 裁 剪 的 形状 和 同一 组 根据 文本 裁剪 的 形状 。 





示例 10-2: 复杂 的 裁剪 路 径 
http://oreillymedia.github.io/sveg-essentials-examples/ch10/complex_clip path.html 


<defs> 
<CLiLpPath id="curveClip"> 
<path id="curve1" 
d="M5 55 CC 25 5; 45 -25, 75. .55; .85.85, 20, 105; 40 55 2Z" 
style="stroke: black; fill: none;"/> 
</cLipPath> 


<CLiLpPath id="textClip"> 
<text id="text1" x="20" y="20" transform="rotate(60)" 
style="font-family: 'Liberation Sans ' ; 
font-size: 48pt; stroke: black; fill: none;"> 
CLIP 
</text> 
</clipPpath> 


<g id="shapes"> 
<rect x="0" y="50" width="90" height="60" style="fill: #999;"/> 
<circle cx="25" cy="25" r="25" style="fill: #666;"/> 
<polygon points="30 0 80 0 80 100" style="fill: #ccc;"/> 
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</g> 
</defs> 


<!- - 绘制 曲线 裁剪 路 径 --> 
<use xlink:href="#shapes" style="clip-path: url(#curveClip);"/> 


<!-- 绘制 文本 裁剪 路 径 --> 
<use transform="translate(100, 0)" 
xlink:href="#shapes" style="clip-path: url(#textClip);"/> 


<g transform="translate(0, 150)"> 

<use xlink:href="#shapes"/> 

<use xlink:href="#curve1"/> <!-- 显示 裁剪 路 径 --> 
</g> 





<g transform="translate(100, 150)"> 
<use xlink:href="#shapes"/> 
<use xlink:href="#text1"/> 

</g> 


为 了 帮助 你 更 好 地 查看 裁剪 区 域 ， 前 面 的 SVG 在 整个 图 像 上 方 绘制 了 裁剪 路 径 ， 在 图 


10-2 的 右 半 部 分 可 以 看 到 。 


Ww 

















po 














10-2; 复杂 的 裁剪 路 径 


前 面 的 裁剪 路 径 坐 标 被 指定 为 用 户 坐 标 。 如 果 想 根据 对 象 的 边界 框 来 表示 坐标 ， 设 置 
cLipPathUnits 为 objectBoundingBox 即 可 (默认 值 为 userSpaceOnUse)。 示 例 10-3 使 用 路 
径 裁 前 在 任意 对 象 上 生成 一 个 圆 形 或 者 椭圆 窗口 。 

















示例 10-3: 应 用 objectBoundingBox 的 clipPathUunits 


<defs> 

<clipPath id="circuLarPath”cLipPathUnits="objectBoundingBox"> 
<circle cx="0.5" cy="0.5" r="0.5"/> 

</cLipPath> 


<g id="shapes"> 





<rect x="0" y="50" width="100" height="50" style="fill: #999;"/> 
<circle cx="25" cy="25" r="25" style="fill: #666;"/> 
<polygon points="30 0 80 0 80 100" style="fill: #ccc;"/> 


</g> 


<g id="words"> 


<text 


font- 


<tspan 
<tspan 
<tspan 
<tspan 
<tspan 


</text> 


</g> 
</defs> 


<use xlink 


x="0" y="19" style="font-family: 'Liberation Sans'; 
size: 14pt;"> 

x="0" y="19">If you have form'd a circle</tspan> 
x="12" y="35">to go into,</tspan> 

x="0" y="51">Go into if yourself</tspan> 

x="12" y="67">and see how you would do.</tspan> 
x="50" y="87">&#8212;William Blake</tspan> 


:href="#shapes" style="clip-path: url(#circularpath);"/> 


<use xlink:href="#words" transform="translate(110, 0)" 
style="clip-path: url(#circularpath);"/> 


10-3 中 ， 几 何 形 状 正好 有 个 方形 边界 框 ， 因 此 裁剪 显示 为 圆 形 。 文 本 由 一 个 和 矩形 区 域 限 
制 ， 因 此 裁剪 区 域 显示 为 一 个 椭圆 。 




















- udve torm'd a cu、 
to go into, 
Go into it yourself 
区 and see how you would dr 


-William Rilal- 








10-3: 使 用 圆 形 / 椭圆 裁剪 路 径 














<marker>、<symbol> 和 <svg> 元 素 都 会 定义 其 自身 的 视 口 ， 你 也 可 以 使 
用 overflow: hidden 样式 来 裁剪 视 口 内 容 。 然 而 ， 如 果 内 容 的 meet 设置 为 
preserveAspectRatio， 视 口 可 能 比 viewBox 更 大 。 要 裁剪 这 个 viewBox， 就 
要 创建 一 个 <clipPath> 元 素 ， 其 中 包含 一 个 匹配 viewBox 最 小 x、 最 小 y、 
宽度 和 高 度 的 矩形 。 








10.2 蒙 版 
SVG 中 的 蒙 版 与 我 们 在 化 装 舞 会 上 戴 的 面具 正好 相反 。 在 化 装 舞 会 上 戴 的 面具 ， 其 不 透 














明 的 部 分 用 于 遮挡 我 们 的 脸 ， 半 透明 的 部 分 让 人 能 隐约 看 到 我 们 的 脸 ， 而 小 孔 〈 或 透明 部 





分 ) 让 人 能 清楚 地 看 到 我 们 的 脸 。 而 SVG 蒙 版 会 变换 对 象 的 透明 度 。 如 果 蒙 版 是 不 透明 
的 ， 被 蒙 版 覆盖 的 对 象 的 像素 就 是 不 透明 的 ， 如 果 蒙 版 是 半 透 明 的 ， 那 么 对 象 就 是 半 透 明 
的 ， 蒙 版 的 透明 部 分 会 使 被 覆盖 对 象 的 相应 部 分 不 可 见 。 


我 们 用 <mask> 元 素 创 建 蒙 版 。 使 用 x、y、width 和 height 属 








性 指定 蒙 版 的 尺寸 。 这 些 尺 




















寸 默 认 按照 objectBoundingBox 计算 。 如 果 想 根据 用 户 空 间 坐 标 计算 尺寸 ， 设置 naskuUnits 
为 userSpace0nUse 即 可 。 


起 始 <mask> 和 结束 </mask> 标记 之 间 是 我 们 想 要 用 作 蒙 版 的 任意 基本 形状 、 文 本 、 图 像 或 
者 路 径 。 这 些 元 素 的 坐标 默认 使 用 用 户 坐 标 空间 表达 。 如 果 想 要 为 蒙 版 内 容 使 用 对 象 边界 
框 ， 设 置 maskContentUnits 为 objectBoundingBox 即 可 (默认 为 userSpace0nUse ) 。 








接 下 来 的 问题 是 : SVG 如 何 确 定 蒙 版 的 透明 度 ， 即 阿尔 法 值 ? 我 们 知道 ， 每 个 像素 由 4 
个 值 描述 ， 分 别 是 红 、 绿 、 蓝 颜色 值 和 不 透明 度 。 虽 然 乍 看 之 下 仅 使 用 不 透明 度 值 即 可 ， 
但 是 SVG 还 是 使 用 了 所 有 可 用 的 信息 ， 而 不 是 丢弃 四 分 之 三 的 像素 信息 。SVG 使 用 如 下 


公式 : 











(0.2125 * red value + 0.7154 * green value + 0.0721 * blue value) * opacity value 


所 有 的 值 都 是 0 到 1 之 间 的 浮 点 数 。 你 可 能 对 各 个 色 值 使 用 的 系数 不 相同 而 感到 惊讶 ， 但 
是 如 果 看 看 完全 饱和 的 红色 、 绿 色 、 蓝 色 ， 则 会 发 现 绿色 似乎 最 亮 ， 红 色 较 暗 ， 蓝 色 最 暗 
(在 图 10-4 中 可 看 到 )。 颜 色 越 暗 ， 产 生 的 阿尔 法 值 越 小 ， 蒙 版 对 象 的 不 透明 度 越 低 。 


= 一 委 = 一 赣 = 二 = 熏 千 === 
图 10-4: 蒙 版 颜色 透明 度 的 效果 


图 10-4 由 示例 10-4 绘制 ， 其 中 创建 了 墨色 文本 和 黑色 圆 形 ， 圆 形 由 完全 不 透明 的 红 、 绿 、 
蓝 和 白色 正方 形 遮 墨 。 文 本 和 圆 形 被 组 合 在 一 起 ， 并 且 这 个 组 合 使 用 mask 样式 属性 引用 了 
对 应 的 蒙 版 。 背 景 中 的 水 平 黄色 条 演示 了 文本 和 圆 形 都 是 半 透 明 的 。 






































大 











示例 10-4: 不 透明 的 颜色 蒙 版 
<defs> 
<mask id="redmask" x="0" y="0" width="1" height="1" 
maskContentUnits="objectBoundingBox"> 
<rect x="0" y="0" width="1" height="1" style="fill: #f00;"/> 
</mask> 


<mask id="greenmask" x="0" y="0" width="1" height="1" 
maskContentUnits="objectBoundingBox"> 
<rect x="0" y="0" width="1" height="1" style="fill: #0f0;"/> 
</mask> 


<mask id="bluemask" x="0" y="0" width="1" height="1" 
maskContentUnits="objectBoundingBox"> 
<rect x="0" y="0" width="1" height="1" style="fill: #00f;"/> 





</mask> 


<mask id="whitemask" x="0" y="0" width="1" height="1" 
maskContentUnits="objectBoundingBox"> 


<rect x="0" y="0" width="1" height="1" style="fill: #fff;"/> 


</mask> 
</defs> 





<!-- 显示 颜色 以 演示 相对 亮度 --> 


<rect x="10" y="10" width="50" height="50" style="fill: #f00;"/> 
<rect x="70" y="10" width="50" height="50" style="fill: #0f0;"/> 
<rect x="130" y="10" width="50" height="50" style="fill: #00f;"/> 


<rect x="190" y="10" width="50" height="50" 
style="fill: #fff; stroke: black;"/> 








<!-- 用 于 演示 透明 度 的 背景 内 容 - -> 
<rect x="10" y="72" width="250" height="5" style="fill: yellow; 








"> 


<rect x="10" y="112" width="250" height="5" style="fill: yellow;"/> 


<g style="mask: url(#redmask); 
font-size: 14pt; text-anchor: middle;"> 
<circle cx="35" cy="115" r="25" style="fill: black;"/> 
<text x="35" y="80">Red</text> 
</g> 


<g style="mask: url(#greenmask); 
font-size: 14pt; text-anchor: middle;"> 
<circle cx="95" cy="115" r="25" style="fill: black;"/> 
<text x="95" y="80">Green</text> 
</g> 


<g style="mask: url(#bluemask); 
font-size: 14pt; text-anchor: middle;"> 
<circle cx="155" cy="115" r="25" style="fill: black;"/> 
<text x="155" y="80">Blue</text> 
</g> 


<g style="mask: url(#whitemask); 
font-size: 14pt; text-anchor: middle;"> 
<circle cx="215" cy="115" r="25" style="fill: black;"/> 
<text x="215" y="80">White</text> 
</g> 




















颜色 、 透 明度 和 最 终 阿尔 法 值 之 间 的 关系 并 不 直观 。 如 果 使 用 白色 填充 或 者 使 用 白色 给 遮 


























旱 内 容 描 边 ， 则 上 面 公式 中 前 半 部 分 “颜色 因子 ”结果 为 1， 此 时 不 
阿尔 法 值 的 唯一 因素 。 示 例 10-5 就 是 使 用 这 种 方式 编写 的 ， 其 结果 如 

















透明 度 则 是 控制 蒙 版 








到 10-5 所 示 。 











100% 75% 50% 











10-5: 阿尔 法 值 等 于 不 透明 度 
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示例 10-5: 只 使 用 不 透明 度 的 蒙 版 阿尔 法 值 
http://oreillymedia.github.io/sveg-essentials-examples/ch10/alpha_opacity mask.html 


<defs> 
<mask id="fullmask" x="0" y="0" width="1" height="1" 
maskContentUnits="objectBoundingBox"> 
<rect x="0" y="0" width="1" height="1" 
style="fill-opacity: 1.0; fill: white;"/> 
</mask> 


<mask id="three-fourths" x="0" y="0" width="1" height="1" 
maskContentUnits="objectBoundingBox"> 
<rect x="0" y="0" width="1" height="1" 
style="fill-opacity: 0.75; fill: white;"/> 
</mask> 


<mask id="one-half" x="0" y="0" width="1" height="1" 
maskContentUnits="objectBoundingBox"> 
<rect x="0" y="0" width="1" height="1" 
style="fill-opacity: 0.5; fill: white;"/> 
</mask> 


<mask id="one-fourth" x="0" y="0" width="1" height="1" 
maskContentUnits="objectBoundingBox"> 
<rect x="0" y="0" width="1" height="1" 
style="fill-opacity: 0.25; fill: white;"/> 
</mask> 
</defs> 


<g style="font-size: 14pt; text-anchor:middle; fill:black;"> 
<g style="mask: url(#fullmask);"> 
<circle cx="35" cy="35" r="25"/> 
<text x="35" y="80">100%</text> 
</g> 


<g style="mask: url(#three-fourths);"> 
<circle cx="95" cy="35" r="25"/> 

<text x="95" y="80">75%</text> 

</g> 


<g style="mask: url(#one-half);"> 
<circle cx="155" cy="35" r="25"/> 
<text x="155" y="80">50%</text> 
</g> 


<g style="mask: url(#one-fourth);"> 
<circle cx="215" cy="35" r="25"/> 
<text x="215" y="80">25%</text> 
</g> 

</g> 





10.3 ”案例 学 习 : 为 图 形 应 用 蒙 版 





示例 10-6 给 9.10 节 中 构造 的 图 形 添加 了 一 个 JPG 图 像 。 正 如 在 图 10-6 (缩小 以 节省 空间 ) 











中 所 看 到 的 ， 图 像 盖 住 了 主 椭圆 内 的 曲线 ， 并 且 蓝 天 也 “侵入 ”了 淡 红 色 部 分 。 








示例 10-6: 图 形 内 未 应 用 蒙 版 的 <image> 


<defs> 
<font-face font-family="bakbatn"> 
<font-face-src> 
<font-face-uri xlink:href="kfont.svg#kfont-defn"/> 
</font-face-src> 
</font-face> 
</defs> 





<!-- 绘制 椭圆 和 文本 --> 
<use xlink:href="ksymbol.svg#ksymbol"/> 





<image xlink:href="kwanghwamun.jpg" x="72" y="92" 
width="160" height="120"/> 








Sa _ 一 Q 
Soul. Republic of Yof 











10-6: 图 形 内 未 应 用 蒙 版 的 <image> 的 效果 


解决 方案 是 让 照片 的 边缘 淡出 ， 使 用 径 向 渐变 作为 蒙 版 很 容易 做 到 。 下 面 是 要 添加 到 文档 


<defs> 部 分 的 代码 : 


<radialGradient id="fade"> 
<stop offset="0%" style="stop-color: white; stop-opacity: 1.0;"/> 
<stop offset="85%" style="stop-color: white; stop-opacity: 0.5;"/> 
<stop offset="100%" style="stop-color: white; stop-opacity: 0.0;"/> 
</radialGradient> 
<mask id="fademask" maskContentUnits="objectBoundingBox"> 
<rect x="0" y="0" width="1" height="1" 
style="fill: url(#fade);"/> 
</mask> 
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然后 给 <image> 标记 添加 一 个 蒙 版 3| 用 ， 结 果 如 图 10-7 所 示 。 


<image xlink:href="kwanghwamun.jpg" x="72" y="92" 
width="160" height="120" 
style="mask: url(#fademask);"/> 








Se 2 
ou. Republic of Ko® 











10-7: 应 用 蒙 版 的 图 像 
将 图 片 的 一 部 分 隐藏 起 来 可 以 大 大 改善 整个 图 形 的 效果 。 
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前 面 的 章节 为 我 们 提供 了 一 些 基 础 知识 ， 以 便 创 建 传达 精确 、 详 细 信息 的 图 形 。 如 果 我 们 
要 去 春游 野餐 ， 会 想 要 一 张 精 确 的 地 图 。 当 我 们 查看 天 气 预报 的 图 形 时 ， 想 要 的 只 是 描述 
“事实 ”的 部 分 。 


如 果 稍 后 有 人 让 你 描述 一 下 野餐 那天 的 情况 ， 他 肯定 不 是 想 让 你 复述 各 种 气象 统计 数据 。 
同样 ， 也 没 人 想 看 一 朱 由 纯 矢 量 组 成 的 春天 的 花 ; 图 11-1 完全 没有 体现 出 温暖 或 魅力 。 





一 



































Spring 
Flower 











11-1: 矢量 组 成 的 花朵 


图 形 通常 被 设计 用 来 激发 人 们 的 感情 和 情绪 ， 也 被 用 来 传达 信息 。 使 用 位 图 图 形 的 艺术 家 
们 通常 只 关心 对 象 的 外 观 而 不 是 它 的 几何 定义 ， 他 们 有 很 多 工具 可 以 用 来 添加 这 些 效果 。 
它们 可 以 生成 模糊 的 投影 ， 加 粗 线条 或 者 让 线条 变 细 ， 给 绘图 添加 纹理 ， 或 者 让 对 象 看 上 
去 像 浮雕 或 者 倾斜 的 。 


11.1 滤 镜 的 工作 原理 


虽然 SVG 不 是 一 种 位 图 描述 语言 ， 但 它 仍 然 允 许 我 们 使 用 一 些 相同 的 工具 。 当 SVG 阅读 
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器 程序 处 理 一 个 图 形 对 象 时 ， 它 会 将 对 象 呈现 在 位 图 输出 设备 上 ， 在 某 一 时 刻 ， 阅 读 喜 程 
序 会 把 对 象 的 描述 信息 转换 为 一 组 对 应 的 像素 ， 然 后 呈现 在 输出 设备 上 。 例 如 我 们 用 SVG 
的 <filter> 元 素 指定 一 组 操作 〈 也 称 作 基 元 ，primitive) ， 在 对 象 的 旁边 显示 一 个 模糊 的 
投影 ， 然 后 把 这 个 滤 镜 附加 给 一 个 对 象 : 




















<filter id="drop-shadow"> 
<!-- 这 是 滤 镜 操作 - -> 
</filter> 


<g id="spring-flower" 
style="filter: url(#drop-shadow);"/> 
<!-- 这 里 绘制 花 打 --> 
</g> 
由 于 花 打 在 显示 样式 中 用 了 滤 镜 ， 所 以 SVG 不 会 将 花 打 直接 泻 染 为 最 终 图 形 。 相 反 ， 
SVG 会 泻 染 花 朱 的 像素 到 临时 位 图 中 。 由 滤 镜 指定 的 操作 会 被 应 用 到 该 临时 区 域 ， 其 结果 
会 被 泻 染 为 最 终 图 形 。 












































默认 情况 下 临时 位 图 的 尺寸 取决 于 泻 染 图 像 的 显示 屏 的 分 辩 率 和 尺寸 。 这 就 意味 着 即使 所 
有 的 SVG 代码 是 相同 的 ， 某 些 滤 镜 效果 也 可 能 在 不 同 大 小 的 显示 屏 中 有 不 同 的 外 观 。 规 
范 中 定义 了 一 些 属性 来 控制 滤 镜 效果 的 有 效 分 辨 率 (http://www.w3.org/TR/SVG11/filters. 
html#FilterEffectsRegion)， 但 是 它们 在 SVG 阅读 器 中 的 实现 并 不 一 致 ， 这 里 也 不 作 讨论 。 


11.2 创建 投影 效果 


示例 5-8 通过 在 着 色 椭 圆 下 方 偏 移 一 个 灰色 椭圆 ， 创 建 了 一 个 投影 效果 。 它 是 有 效 的 ， 但 
是 不 优雅 。 让 我 们 来 研究 一 下 如 何 使 用 滤 镜 创建 更 美观 的 投影 。 

















11.2.1 建立 滤 镜 的 边界 

<filter> 元 素 有 一 些 属性 用 来 描述 该 滤 镜 的 裁剪 区 域 。 我 们 按照 滤 镜 对 象 边 界 框 的 百分比 
指定 x、y、width 和 height (这 也 是 默认 方式 )。 任 何在 边界 外 部 的 输出 都 不 会 显示 。 如 
果 想 要 为 多 个 对 象 应 用 同一 个 滤 镜 ， 可 能 要 完全 忽略 这 些 属性 ， 并 用 默认 值 x 等 于 -10%， 
y 等 于 -10% ，width 等 于 120%，height 等 于 120%。 这 就 为 滤 镜 提供 了 额外 的 空间 一 一 这 
样 构造 的 投影 ， 产 生 的 输出 就 会 比 输入 大 。 


这 些 属性 是 按照 滤 镜 对 象 的 边界 框 来 计算 的 ， 这 是 比较 特殊 的 地 方 ， 即 filterunits 的 
默认 值 是 objectBoundingBox。 如 果 想 要 按照 用 户 单位 指定 边界 ， 设 置 这 个 属性 的 值 为 
userSpaceOnUse 即 可 。 














还 可 以 用 primitiveUnits 属性 为 用 于 滤 镜 基 元 中 的 单元 指定 单位 。 默 认 值 为 userSpaceOnUse， 
但 是 如 果 设 置 为 objectBoundingBox， 就 可 以 按照 图 形 尺寸 的 百分比 来 表示 单位 。 
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11.2.2 投影 <feGaussianBlur> 


起 始 和 结束 <filter> 标记 之 间 就 是 执行 我 们 想 要 的 操作 的 着 镜 基 元 。 每 个 基 元 有 一 个 或 多 
个 输入 ， 但 只 有 一 个 输出 。 一 个 输入 可 以 是 原始 图 形 (被 指定 为 SourceGraphic)、 图 形 的 
j 尔 法 (不 透明 度 ) 通道 (被 指定 为 SourceAlpha)， 或 者 是 前 一 个 滤 镜 基 元 的 输出 。 当 只 
对 图 形 的 形状 感 兴趣 而 不 管 其 颜色 时 ， 阿 尔 法 源 是 有 用 的 ， 它 会 避免 阿尔 法 和 颜色 相互 作 
用 ， 正 如 10.2 节 中 所 描述 的 。 


示例 11-1 第 一 次 尝试 为 花 来 生成 一 个 投影 ， 使 用 的 是 <feGaussianBlur> 滤 镜 基 元 。 我 们 

肯定 SourceAlpha 为 它 的 输入 源 (用 in 属性 )， 用 stdDeviation 属性 指定 它 的 模糊 度 。 这 
个 数值 越 大 ， 模 糊 度 越 大 。 如 果 给 stdDeviation 值 提供 两 个 由 空格 分 隔 的 数字 ， 第 一 个 数 
字 被 作为 x 方向 的 模糊 度 ， 而 第 二 个 被 作为 y 方 向 的 模糊 度 。 


示例 11-1: 生成 投影 的 第 一 次 尝试 
<defs> 
<filter id="drop-shadow"> 
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/> 
</filter> 
</defs> 








可 























ne 











<g id="flower" filter="url(#drop-shadow)"> 
<!-- 在 这 里 绘制 花 人 杂 --> 
</g> 


11-2 展示 了 结果 ， 它 可 能 不 是 我 们 所 想 的 那样 。 

















11-2: 第 一 次 尝试 输出 投影 的 结果 


不 要 惊 讶 。 记 住 ， 滤 镜 返 回 的 输出 是 一 个 模糊 的 阿尔 法 通道 ， 而 不 是 原始 图 形 。 通 过 将 花 
采 放 入 文档 的 <defs> 中 可 以 得 到 我 们 想 要 的 效果 ， 将 SVG 代码 改变 为 如 下 所 示 : 








<use xlink:href="#flower" filter="url(#drop-shadow)" 
transform="translate(4, 4)"/> 
<use xlink:href="#flower"/> 


然而 ， 这 就 要 求 SVG 对 组 成 花 采 的 所 有 元 素 执行 两 次 计算 。 更 好 的 解决 方案 是 添加 更 多 
的 滤 镜 基 元 ， 让 所 有 的 工作 可 以 在 渲染 期 间 一 次 完成 。 
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11.2.3 存储 、 链 接 以 及 合并 滤 镜 结果 


示例 11-2 是 改进 后 的 滤 镜 。 


示例 11-2: 改进 过 的 投影 滤 镜 
<filter id="drop-shadow"> 
<feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"> © 
<fe0ffset in="blur" dx="4" dy="4" resuLt="offsetBLur"> @ 
<feMerge> © 
<feMergeNode in="offsetBlur"> 
<feMergeNode in="SourceGraphic"]/> 
</feMerge> 
</filter> 
@ result 属性 指定 当前 基 元 的 结果 稍 后 可 以 通过 blur 名 引用 。 这 不 同 于 XML id， 给 定 的 
名 称 是 一 个 局 部 名 称 ， 它 只 在 包含 该 基 元 的 <fLter> 中 有 效 。 
@ <fe0ffset> 基 元 接受 它 的 输入 ， 在 这 里 就 是 Gaussian blur 的 返回 结果 blur， 它 的 偏 移 由 
dx 和 dy 的 值 指定 ， 然 后 将 结果 位 图 存储 在 offsetBLur 名 字 下 面 。 
四 <feMerge> 基 元 包 囊 一 个 <feMergeNode> 元 素 列 表 ， 其 中 每 个 元 素 都 指定 一 个 输入 。 这 些 
输入 按照 它们 出 现 的 顺序 一 个 堆 县 在 另 一 个 上 面 。 在 这 里 我 们 希望 offsetBLur 在 原始 
SourceGraphic 下 面 。 


现在 ,绘制 花 末 时 就 可 以 引用 这 个 改进 后 的 投影 滤 镜 序列 了 ， 它 会 生成 一 个 令 人 愉悦 的 如 
图 11-3 所 示 的 图 片 。 















































<g id="flower" filter="url(#drop-shadow)"> 
<1-- 这 里 绘制 花 打 --> 
</g> 





























图 11-3: 改进 后 的 投影 结 


初次 使 用 滤 镜 上 时， 强烈 建议 你 分 阶段 学 习 ， 一 次 测试 一 个 滤 镜 。 在 尝试 发 现 
滤 镜 的 工作 原理 期 间 ， 我 就 创建 了 大 量 丑陋 的 结果 ， 你 可 能 也 会 这 样 ， 就 让 
它们 成 为 我 们 之 间 的 小 秘密 吧 。 




















同样 ， 初 次 学 习 滤 镜 时 ， 可 能 会 想 在 一 个 绘画 上 应 用 多 个 滤 镜 ， 看 看 会 发 生 
些 什么 。 因 为 你 的 目的 就 是 实验 ， 所 以 尽管 去 做 吧 。 一 旦 完成 实验 并 开始 生 
产 工作 ， 使 用 滤 镜 的 目的 就 不 一 样 了 。 滤 镜 应 该 用 来 帮助 和 增强 我 们 的 消 
息 ， 而 不 是 反 过 来 让 消息 更 不 明显 。 明 智 地 用 一 两 个 滤 镜 会 有 好 处 ， 而 大 多 
的 滤 镜 儿 乎 总 是 会 弱化 消息 。 
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11.3 创建 发 光 式 投影 


用 影 在 花 朱 上 的 效果 很 好 ， 但 应 用 给 文本 时 则 完全 不 理想 ， 正 如 在 图 11-4 中 看 到 的 那样 。 


























Spring 
Flower 











11-4: 文本 投影 























如 果 文 本 周围 有 一 个 蓝 绿 色 发 光 区 域 ， 看 起 来 会 更 好 看 。 可 以 用 <feCotorMatrix> 基 元 来 
创建 这 个 效果 ， 使 用 它 将 黑色 变 为 其 他 颜色 。 





11.3.1 <feColorMatrix> 元 素 


<feColorMatrix> 元 素 允 许 我 们 以 一 种 非常 通用 的 方式 改变 颜色 值 。 用 于 创建 蓝 绿 色 发 光 式 
投影 的 基 元 序列 如 示例 11-3 所 示 。 


示例 11-3: 发 光 滤 镜 
<filter id="glow"> 
<feColorMatrix type="matrix" 
values= 





<feGaussianBlur stdDeviation="2.5" 
result="coloredBlur"/> 
<feMerge> 
<feMergeNode in="coloredBlur"/> 
<feMergeNode in="SourceGraphic"/> 
</feMerge> 
</filter> 


<feColorMatrix> 是 一 个 通用 的 基 元 ， 允 许 我 们 修改 任意 像素 点 的 颜色 或 阿尔 法 值 。 当 
type 属性 等 于 matrix 的 时 候 ， 我 们 必须 设置 value 为 20 个 数字 来 描述 变换 信息 。 这 20 个 
数字 按照 4 行 5 列 编写 时 最 好 理解 。 每 行 代表 一 个 代数 方程 ， 定 义 了 如 何 计算 输出 的 R、 
G、B、A 值 〈 按 行 的 顺序 )。 每 行 中 的 数字 分 别 乘 以 输入 像素 的 R、G、B、A 的 值 和 常量 
1 (按照 列 的 顺序 )， 然 后 加 在 一 起 得 到 输出 值 。 要 设置 一 个 变换 ， 将 所 有 不 透明 区 域 绘制 
为 相同 的 颜色 ， 可 以 忽略 输入 颜色 和 常量 ， 只 要 设置 阿尔 法 列 的 值 即 可 。 这 个 矩阵 模型 看 
起 来 如 下 所 示 : 




















values= 


000 
000 blue 0 
000 





滤 镜 | 135 


这 里 red、green 和 blue 的 值 通常 是 0 到 1 之 间 的 十 进 制 数 。 示 例 11-3 中 ，red 设置 为 0， 
green 和 blue 的 值 设置 为 0.9， 这 会 生成 一 个 明亮 的 青色 。 





注意 ， 这 个 例子 中 并 没有 一 个 用 作 这 个 基 元 输入 的 in 属性 ， 默 认 使 用 SourceGraphic。 这 
个 基 元 上 也 没有 result 属性 。 这 意味 着 这 个 颜色 和 矩阵 操作 的 输出 只 用 于 下 一 个 滤 镜 基 元 的 
隐 性 输入 。 如 果 使 用 这 种 快捷 方式 ， 那 么 下 一 个 滤 镜 基 元 一 定 不 能 有 ;in 属性 。 


在 这 个 例子 中 ，<feColorMatrix> 的 结果 是 青色 的 色 源 。 该 滤 镜 的 其 他 部 分 在 它 的 基础 上 
使 用 了 一 个 高 斯 模糊 ， 青 色 模糊 结果 被 在 储 下 来 ， 以 便 将 来 用 cotoredBtur 引用 它 。 最 后 ， 
<feMerge> 在 对 象 下 面 产生 输出 发 光 。 


























我 们 可 以 使 用 这 两 个 滤 镜 创建 新 的 图 形 ， 改 进 后 的 SVG 如 下 所 示 ， 结 果 见 图 11-5。 











<g id="flower" style="filter: url(#drop-shadow);"> 
1-= 绘制 花灯 -> 
</g> 
<text x="120" y="50" 
style="filter: url(#glow); fill: #003333; font-size: 18;"> 
Spring <tspan x="120" y="70">Flower</tspan> 
</text> 





Spring 
Flower 














11-5; 投影 和 发 光 文本 


11.3.2 ”<feColorMatrix> 详 解 

前 面 的 例子 使 用 的 是 最 通用 的 一 种 颜色 和 矩阵， 可 以 任意 指定 我 们 想 要 的 值 。type 属性 还 有 
其 他 三 个 值 。 每 个 “内 置 ” 的 颜色 和 矩形 都 完成 一 个 特定 的 视觉 任务 ， 并 且 都 有 自己 的 指定 
values 的 方式 。 





。 hueRotate (色相 旋转 ) 
values 是 一 个 单一 的 数字 ， 描 述 颜 色 的 色相 值 应 该 被 旋转 多 少 度 。 完 成 这 一 任务 的 数 
学 运算 与 6.5 市 中 所 描述 的 rotate 变换 非常 相似 。 旋 转 和 结果 颜色 之 间 的 关系 一 点 也 
不 明显 ， 如 图 11-6 所 示 。 你 可 以 在 在 线 版 本 中 进行 试验 : 














注 1: 在 HSL 和 HSYV 色彩 空间 中 ,，H 指 的 就 是 色相 ， 可 以 将 不 同色 相 的 颜色 分 布 在 一 个 环 上 ， 以 角度 表 
示 颜 色 。 例 如 红色 为 0 度 (360 度 )， 绿色 为 120 度 ， 蓝 色 为 240 度 。 可 参见 http://zh.wikipedia.org/ 
wiki/%E8%89%B2%E7%9B%B8。 一 一 译 者 注 
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http:/oreillymedia.github.io/svg-essentials-examples/ch1l/hue_rotate.html 
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> 本 大 国 目 国 国 


11-6: hueRotate 在 完全 饱和 颜色 上 的 效果 















。 saturate (饱和 度 ) 
values 属性 指定 一 个 0 到 1 之 间 的 数字 。 数 字 越 小 ， 颜 色 “ 褪 色 ” 越 多 ， 正 如 在 图 
11-7 中 可 以 看 到 的 。 值 为 0， 则 将 图 形 转 换 为 黑白 图 。 这 个 滤 镜 只 可 以 用 来 降低 图 像 的 
饱和 度 ( 洗 白 图 像 )， 不 能 增加 饱和 度 (将 正常 图 片 变 成 彩色 图 像 )。 





























在 线 示例 中 可 以 测试 其 他 饱和 度 值 ; 


http://oreillymedia.github.io/svg-essentials-examples/ch1 1/saturate.html 
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11-7: 一 些 主要 颜色 不 同 饱和 度 下 的 效果 

















。 luminanceToAlpha (用 亮度 决定 阿尔 法 值 ) 
这 个 滤 镜 根据 颜色 的 亮度 建立 阿尔 法 通道 。 这 个 亮度 是 颜色 固有 的 “亮度 ”， 正 如 10.2 
节 中 所 描述 的 。 图 11-8 中 ， 颜 色 方 块 的 亮度 被 用 作 实 心 黑 方 块 的 阿尔 法 通道 。 这 个 滤 
镜 会 丢弃 原始 方块 的 颜色 ， 结 果 是 具有 不 同 透 明度 的 纯 墨色。 颜色 越 浅 ， 赋 予 滤 镜 对 象 
的 透明 度 越 低 。 这 一 类 型 (type) 忽略 了 values 属性 。 


ss 国 国 国 国 
品 外 法 “” 国 国 

















11-8:， LuminanceToALpha 效果 
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11.4 ”<feImage> 滤 镜 


到 目前 为 下 ,我 们 只 见 过 将 原始 图 形 或 者 阿尔 法 通道 作为 滤 镜 的 输入 源 。SVG 的 
<feImage> 元 素 人 允许 我 们 使 用 任意 的 JPG、PNG、SVG 文件 ， 或 者 带 有 id 属性 的 SVG 元 
素 作为 滤 镜 的 输入 源 。 示 例 11-4 导入 了 一 个 蓝天 白云 的 图 片 用 作 花 傈 图片 的 背景 。 




















示例 11-4: 使 用 <feImage> 元 素 
<defs> 
<filter id="sky-shadow" filterUnits="objectBoundingBox"> 
<feImage xlink:href="sky.jpg" result="sky" 
x="0" y="0" width="100%" height="100%" 
preserveAspectRatio="none'"/> 
<feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/> 
<fe0ffset in="blur" dx="4" dy="4" result="offsetBlur"/> 
<feMerge> 
<feMergeNode in="sky"/> 
<feMergeNode in="offsetBlur"/> 
<feMergeNode in="SourceGraphic"/> 
</feMerge> 
</filter> 
</defs> 


<g id="flower" style="filter: url(#sky-shadow)"> 
<!-- 这 里 绘制 花 末 图 形 --> 
</g> 


<!-- 展示 原始 图 像 - -> 
<image xlink:href="sky.jpg" x="170" y="10" 
width="122" height="104"/> 














Ee 





图 11-9 展示 了 结果 ， 原 始 的 蓝天 图 片 按照 它 本身 的 尺寸 显示 在 右 侧 。 图 像 默 认 被 拉 伸 以 
适应 定义 在 <filter> 元素 上 的 滤 镜 区 域 (默认 情况 下 滤 镜 没有 尺寸 ， 因 此 默认 滤 镜 区 域 
是 对 象 边界 框 超出 10% 的 范围 )。 在 <feImage> 元 素 上 可 以 设置 明确 的 宽度 、 高 度 和 x/ 
y 偏 移 。 默 认 情 况 下 ， 这 些 都 使 用 userspaceOnUse 单位 ， 然而， 所 有 的 百分比 值 都 是 相 
对 于 滤 镜 区 域 进行 计算 的 。 可 以 在 <filter> 元 素 上 使 用 primitiveUnits 属性 来 切换 到 
objectBoundingBox 的 单位 ， 但 是 这 会 影响 滤 镜 中 的 所 有 元 素 。 




















11-9，<feImage> 效果 








除了 导入 一 个 完整 的 图 像 文 件 ， 还 可 以 在 xLink:href 属性 中 使 用 URL 片 
段 ， 从 某 个 文件 中 或 者 同一 SVG 文件 的 其 他 位 置 导入 SVG 图 形 的 一 部 分 到 
滤 镜 中 。 不 幸 的 是 ，Mozilla FireFox 目前 还 不 支持 在 <feImage> 中 使 用 图 像 
片段 。 可 以 参考 Bugzilla bug 455986 (https://bugzilla.mozilla.org/show_bug. 
cgi?id=455986) 查看 它 的 最 新 情况 。 


























11.5 <feComponentTransfer> 滤 镜 


上 图 中 背景 的 问题 在 于 它 太 暗 了 。 调 整 saturate 并 不 能 达到 预期 的 效果 ， 它 虽然 改变 了 
颜色 的 饱和 度 ， 但 并 不 会 改变 亮度 。 要 让 图 片 变 亮 ， 需 要 增加 每 个 颜色 分 量 的 值 。 虽 然 可 
以 使 用 自 定义 颜色 和 矩阵 来 达到 这 一 效果 ， 但 是 <feComponentTransfer> 提供 了 一 种 更 方便 、 
更 灵活 的 方式 来 单独 操作 每 个 颜色 分 量 。 它 还 允许 我 们 对 每 个 颜色 分 量 作出 不 同 的 调整 
因此 我 们 既 可 以 让 蓝天 更 亮 ， 也 可 以 通过 增加 绿色 和 红色 级 别 (多 于 蓝 色 级 别 )， 让 它 没 
有 那么 强烈。 


























可 以 通过 在 <feComponentTransfer> 内 配置 <feFuncR>、<feFuncG>、<feFuncB> 和 <feFuncA> 
元 素 ， 调 整 红 、 绿 、 蓝 色 和 阿尔 法 的 级 别 。 每 个 子 元 素 都 可 以 单独 指定 一 个 type 属性 ， 说 
明 应 如 何 修改 该 通道 。 


为 了 模拟 亮度 控制 的 效果 ， 我 们 要 指定 Linear 国 数 ， 它 会 把 当前 颜色 分 量 值 5 放 到 公式 

slope * C + intercept 中 。intercept 为 结果 提供 了 一 个 “基准 值 ”，sLope 是 一 个 简单 的 

eT 示例 11-5 用 滤 镜 给 带 有 投影 的 花 朱 添加 了 一 个 明亮 的 天 空 。 注 意 ， 红 色 和 绿色 
通道 都 做 了 与 蓝 色 通道 不 同 的 调整 。 调 整 后 天 空 变 亮 了 很 多 ， 如 图 11-10 所 示 。 



























































示例 11-5: 使 用 <feComponentTransfer> 改变 亮 
http://oreillymedia.github.io/sve-essentials-exam ee Tl/linear_transferhtml 


<filter id="brightness-shadow" filterUnits="objectBoundingBox"> 
<feImage xlink:href="sky.jpg" result="sky"/> 
<feComponentTransfer in="sky" result="sky"> 
<feFuncB type="linear" slope="3" intercept="0"/> 
<feFuncR type="linear" slope="1.5" intercept="0.2"/> 
<feFuncG type="linear" slope="1.5" intercept="0.2"/> 
</feComponentTransfer> 
<feGaussianBLur in="SourceAlpha" stdDeviation="2" result="blur"/> 
<fe0ffset in="blur" dx="4" dy="4" result="offsetBlur"/> 
<feMerge> 
<feMergeNode in="sky"/> 
<feMergeNode in="offsetBlur"/> 
<feMergeNode in="SourceGraphic"/> 
</feMerge> 
</filter> 
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11-10: 线性 <feComponentTransfer> 效果 


简单 的 线性 调整 会 为 一 个 颜色 分 量 中 的 所 有 值 加 上 和 乘 以 一 个 相同 的 量 。 但 是 gamma 函数 
不 是 这 样 的 ， 它 把 当前 颜色 值 C 放 入 了 公式 ampLitude * Cs + offset 中 。offset 为 结 
果 提 供 了 一 个 “基准 值 ”"”，amplitude 是 一 个 简单 的 比例 因子 ，exponent 让 结果 与 原始 值 的 
对 应 关系 是 一 条 曲线 而 不 是 直线 。 由 于 颜色 值 始 终 是 0 到 1 之 间 的 数字 ， 所 以 指数 越 大 ， 
修改 后 的 值 越 小 。 图 11-11 展示 了 由 指数 值 等 于 0.6 (黑色 实 线 )、0.3 (虚线 ) 和 1.666 7 
( 灰 线 ) 生成 的 曲线 。 


看 看 虚线 ， 会 看 到 较 小 的 原始 颜色 值 0.1 会 被 提高 到 0.5， 增 长 了 400%。 而 原始 值 0.5 只 
增加 了 60% 到 0.8。 它 的 作用 是 亮 化 整个 图 片 ， 增 加 暗色 区 域 的 对 比 度 ， 同 时 降低 亮色 区 
域 的 对 比 度 。 对 于 大 于 1 的 指数 ( 灰 线 )， 修 改 后 的 值 反 而 小 于 原始 值 ， 瞳 化 图 像 的 同时 
增加 了 明亮 区 域 的 对 比 度 。 注 意 ， 灰 实 线 和 黑 实 线 相 对 于 对 角 线 是 对 称 的 : 伽 马 值 1.6667 
是 伽 马 值 0.6 的 逆 和 矩阵 。 任 何 情况 下 ， 原 始 值 为 0 或 时， 指数 都 是 没有 作用 的 。 




















修改 后 的 值 














图 11-11: 伽 马 曲线 函数 


当 指 定 伽 马 诚 镜 时 ， 我 们 设置 amplitude、exponent 和 offset 属性 为 前 面 公式 中 对 应 的 值 。 
示例 11-6 使 用 伽 马 校正 调整 了 天 空 。 在 这 个 示例 中 ， 图 11-10 和 图 11-12 之 间 的 差异 是 较 
小 的 ， 但 是 有 些 图 片 通过 这 种 方法 会 比 前 一 种 方法 得 到 更 多 的 改善 。 




















示例 11-6: 使 用 <feComponentTransfer> 的 伽 马 校正 
http://oreillymedia.github.io/svg-essentials-examples/chll/gamma_transfer.html 
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<feImage xlink:href="sky.jpg" result="sky"/> 
<feComponentTransfer in="sky" result="sky"> 
<feFuncB type="gamma" 
amplitude="1" exponent="0.2" offset="0"/> 
<feFuncR type="gamma" 
amplitude="1" exponent="0.707" offset="0"/> 
<feFuncG type="gamma" 
amplitude="1" exponent="0.707" offset="0"/> 
</feComponentTransfer> 














图 11-12: 伽 马 校正 的 结果 


精明 的 读者 (就 是 你 ) 可 能 会 注意 到 ， 线 性 和 合 马 函数 都 可 以 生成 大 于 1.0 
的 颜色 值 。SVG 规范 中 说 这 并 不 是 一 个 错误 ;在 每 个 滤 镜 基 元 之 后 ，SVG 
处 理 程 序 都 会 将 值 固定 在 一 个 有 效 的 范围 内 。 因 此 ， 所 有 大 于 1.0 的 值 都 会 
被 减 小 为 1.0， 任 何 小 于 0 的 值 都 会 被 调整 为 0。 

















<feComponentTransfer> 的 type 属性 还 有 其 他 选项 。 注 意 ， 我 们 可 以 任意 混合 和 匹配 这 些 
选项 ， 可 以 针对 红色 值 使 用 件 马 校正 ， 而 用 线性 函数 来 亮 化 绿色 值 。 


identity 

一 个 “什么 都 不 做 ”的 函数 。 它 允许 我 们 明确 规定 颜色 通道 应 该 不 受 影响 (如果 不 给 通 
道 提 供 一 个 <feFuncx> 元 素 的 话 ， 这 是 默认 行为 )。 

table 

允许 我 们 将 颜色 值 划 分 为 一 系列 相等 的 间隔 ， 每 个 间隙 中 的 值 都 相应 地 扩大 。 类 似 这 
样 : 最 小 的 四 分 之 一 颜色 范围 的 值 加 倍 ， 下 一 个 四 分 之 一 都 塞 和 人 一 个 十 分 之 一 的 范围 ， 
保持 第 三 个 四 分 之 一 的 范围 不 变 ， 然 后 将 最 后 一 个 四 分 之 一 的 值 塞 和 人 剩 下 的 15% 的 颜 
色 范 围 中 。 








原始 值 范围 修改 后 的 值 范围 


0.00~0.25 0.00~0.50 
0.25~0.50 0.50~0.60 
0.50~0.75 0.60~0.85 
0.75~1.00 0.85~1.00 
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我 们 可 以 通过 在 tablevalues 属性 中 列 出 重 映射 范围 的 端点 ， 指 定 绿色 通道 的 映射 





<feFuncG type="table" 
tableValues ="0.0, 0.5, 0.6, 0.85, 1.0"/> 


如 果 将 输入 范围 划分 为 n 个 不 同 的 部 分 ， 必 须 在 tableValues 中 提供 n+l 个 选项 ， 使 用 空 

格 或 逗号 分 隔 。 

。 discrete 
允许 我 们 将 颜色 值 划 分 为 一 系列 相等 的 间隔 ， 然 后 将 每 个 都 映射 到 一 个 离散 的 颜色 值 。 
类 似 这 样 : 最 低 的 四 分 之 一 颜色 范围 的 值 映 射 到 0.125， 下 一 个 四 分 之 一 映射 到 0.375， 
第 三 个 四 分 之 一 映射 到 0.625， 剩 下 的 四 分 之 一 映射 到 0.875 (也 就 是 每 个 四 分 之 一 范围 
都 被 映射 到 它们 的 中 间 值 )。 





原始 值 范 围 修改 后 的 值 
0.00~0.25 0.125 
0.25~0.50 0.375 
0.50~0.75 0.625 
0.75~1.00 0.875 





我 们 可 以 在 tableValues 属性 中 列 出 离散 值 ， 指 定 绿色 通道 的 映射 ， 值 之 间 用 喜 号 或 空格 


分 隔 : 


<feFuncG type="discrete" 
tableValues ="0.125 0.375 0.625 0.875"/> 





在 tableValues 属性 中 分 割 输入 通道 为 几 个 部 分 就 需要 几 个 人 口 。 例 外 情况 : 如 果 想 要 重 
新 映射 所 有 的 输入 值 给 单个 输出 值 ， 必 须 将 该 入 口 放 入 tableValues 中 两 次 。 因 此 ， 要 设 
置 蓝 色 通道 的 输入 值 为 0.5， 就 要 这 样 : 





<feFuncB type="discrete" tableValues="0.5 0.5"/> 


如 果 想 要 反 转 通道 的 颜色 值 范 围 (即将 从 小 到 大 的 递增 改变 为 从 大 到 小 的 递 
减 )， 使 用 这 种 方式 : 


<feFuncX type="table" 
tableValues="maximum minimum"/> 











图 11-13 展示 了 使 用 discrete 转换 、table 转换 以 及 反 转 table 转换 的 效果 。 
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原始 颜色 
table 转 换 
discrete 转 换 
反 转 的 颜色 
11-13; 使 用 table 和 discrete 转换 的 效果 
定义 色彩 空间 


通常 ， 红 、 绿 、 蓝 颜色 分 量 的 值 被 表示 在 一 条 从 0 到 1 的 直线 上 ,0 表示 没有 颜色 ，1 
表示 100% 的 颜色 。 这 被 称 作 线 性 颜色 空间 。 然 而 ， 当 SVG 计算 渐变 点 之 间 的 颜色 值 
时 (正如 8.2 节 中 所 描述 的 ) ，SVG 使 用 一 种 特殊 的 方式 表示 颜色 ， 而 这 样 的 值 并 不 是 
一 条 0 到 1 的 直线 。 这 种 表示 法 被 称 作 标准 RGB ， 也 叫 SRGB 色彩 空间 (http:Wwww. 
Ww3.0rg/Graphics/Color/sRGB.html) ， 使 用 它 可 以 使 渐变 的 颜色 更 自然 。 图 11-4 展示 了 
对 比 结果 。 第 一 个 渐变 是 从 黑色 到 绿色 ， 第 二 个 是 从 红色 到 绿色 再 到 蓝 色 ， 而 第 三 个 
是 从 黑色 到 白色 。 

默认 情况 下 ， 滤 镜 算法 会 使 用 线性 RGB 空间 的 值 计算 所 有 插值 颜色 ， 因 此 如 果 
我 们 给 一 个 填充 了 渐变 的 对 象 应 用 滤 镜 ， 得 到 的 结果 可 能 根本 就 不 是 我 们 所 期 望 
的 。 为 了 得 到 正确 的 结果 ， 我 们 必须 通过 给 <fiLter> 元 素 添 加 color-interpolation- 
fiLters="sRGB" 属 性， 让 滤 镜 按照 SRGB 色彩 空间 来 计算 。 作 为 另 一 种 选择 ， 我 们 还 可 
以 选择 不 修改 滤 镜 ， 而 是 给 <gradient> 元 素 应 用 color-interpolation="linearRGB"， 
以 让 它 使 用 的 色彩 空间 与 滤 镜 的 默认 色彩 空间 相同 。 





linearRGB sRGB 


















11-14: linearRGB 和 sRGB 对 比 











11.6 ”<feComposite> 滤 镜 


到 目前 为 止 ， 我 们 已 经 通过 使 用 <feMerge> 将 多 个 滤 镜 层 侄 起来， 合并 了 多 个 滤 镜 的 结 
果 。 而 更 常用 的 <feComposite> 元 素 接受 两 个 输入 源 ， 分 别 指定 在 in 和 in2 属性 中 ， 它 的 
operator 属性 用 于 设置 如 何 合并 这 两 个 输入 源 。 在 下 面 的 解释 中 ， 假 设 我 们 已 经 给 前 一 个 
滤 镜 基 元 输出 指定 了 resuLt="A" 和 result="B": 
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。 <feComposite operator="over" in="A" in2="B"/> 
生成 的 结果 是 A 层 琶 在 B 上面， 正如 <feMergeNode> 做 的 那样 。 事 实 上 ，<feMergeNode> 
仅仅 是 指定 over 操作 的 <feConposite> 元 素 的 一 种 便利 的 快捷 方式 (<feMergeNode> 也 
允许 我 们 一 次 层 合 两 个 以 上 的 图 形 )。 























。 <feComposite operator="in" in="A" in2="B"/> 
结果 是 A 的 一 部 分 重 倒 在 B 的 不 透明 区 域 。 类 似 于 蒙 版 效果 ， 但 是 这 个 蒙 版 仅仅 基于 
B 的 阿尔 法 通道 ， 而 不 是 它 是 颜色 亮度 。 不 要 混 靖 这 个 属性 值 的 名 字 和 in 属性 。 





。 <feComposite operator="out" in="A" in2="B"/> 


结果 是 A 的 一 部 分 位 于 B 的 不 透明 区 域 的 外 部 ( 半 透 明 区 域 有 反 转 蒙 版 的 效 
































人 





。 <feComposite operator="atop” in="A" in2="B"/> 
结果 是 A 的 一 部 分 位 于 B 里 面 ，B 的 一 部 分 在 A 外 面 。 引 用 一 下 首先 定义 这 些 操作 符 
的 文章 :“…… “报纸 atop 桌面 ”会 包括 报纸 在 桌面 上 的 部 分 ， 以 及 桌面 部 分 。 在 桌 
面 之 外 的 报表 不 在 最 终 图 形 中 。”(...paper atop table includes paper where it is on top of 


table, and table otherwise; area beyond the edge of the table is out of the picture.) < 

















。 <feComposite operator="xor" in="A" in2="B"/> 


结果 包含 位 于 B 的 外 面 的 A 的 部 分 和 位 于 A 的 外 面 的 B 的 部 分 。 





























。 <feComposite in="A" in2="B" operator="arithmetic".../> 
灵活 性 最 大 。 我 们 要 提供 4 个 系数 : kK1、k2、k3、k4。 每 个 像素 的 每 个 通道 的 结果 按照 
如 下 方式 计算 : 


ki*A*B+k2*A+k3*B+ k4 














这 里 的 A 和 B 是 来 自 输入 图 形 像素 的 颜色 分 量 。 








算术 操作 符 在 处 理 “ 溶 解 ” 效 果 时 很 有 有 用。 如果 想 要 一 个 由 图 像 A 的 a% 
和 图 像 B 的 b% 生成 的 结果 图 像 ， 设 置 k1 和 k4 为 0，kz2 为 a/100 以 及 k3 
为 b/100 即 可 。 例 如 ， 要 创建 一 个 30% A 和 70% B 的 混合 效果 ， 这 样 做 就 
行 了 : 























<feComposite in="A" in2="B" resuylt="combined" 
k1="0" k2="0.30" k3="0.70" k4="0"/> 


图 11-15 展示 了 我 们 所 描述 的 组 合 ， 红 色 的 文本 是 in 图 像 ， 模 糊 偏 移 的 投影 是 in2 图 像 ， 
arithmetic 参数 为 50% 的 文本 和 50% 的 投影 。 








注 2:“ 合 成 数字 图 像 ”(Compositing Digital Images) ,T. Porter 和 T. Duff 著 ,计算 机 协会 SIGGRAPH 84 会 议 录 ， 
18 卷 3 号 ，1984 年 7 月 。 
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atoP Xo arithmetic 











11-15; 使 用 <feComposite> 运算 符 的 效果 


示例 11-7 用 in 和 out 运算 符 做 了 一 个 “ 雏 空 ”效果 。 这 个 例子 中 移 除了 投影 效果 ， 最 终 
生成 如 图 11-16 所 示 的 视觉 上 更 赏心悦目 的 效果 。 


示例 11-7: 使 用 <feComposite> in 和 out 


<defs> 
<filter id="sky-in" filterUnits="objectBoundingBox"> 
<feImage xlink:href="sky.jpg" result="sky" 
x="0" y="0" width="100%" height="100%" 
preserveAspectRatio="none"/> 
<feComposite in="sky" in2="SourceGraphic" 
operator="in"/> 
</filter> 


<filter id="sky-out" filterUnits="objectBoundingBox"> 
<feImage xlink:href="sky.jpg" result="sky" 
x="0" y="0" width="100%" height="100%" 
preserveAspectRatio="none"/> 
<feComposite in="sky" in2="SourceGraphic" 
operator="out"/> 
</filter> 


<g id="flower"> 

<!-- 这 里 绘制 花 杂 图 形 --> 
</g> 
</defs> 





<use xlink:href="#flower" transform="translate(10,10)" 
style="filter: url(#sky-in);"/> 


<use xlink:href="#flower" transform="translate(170,10)" 
style="filter: url(#sky-out);"/> 

















11-16， feComposite in 和 out 效果 
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11.7 ”<feBlend> 滤 镜 


别 急 ， 还 有 很 多 ! 是 的 ， 滤 镜 还 提供 了 另外 一 种 合并 图 像 的 方式 。<feBlend> 元 素 需 要 
0 分 别 指 让 nt 性 中 。 和 要 一 个 mode 和 用 和 和 

可 能 的 值 有 : normal、multiply、screen、lighten 和 darken。 给 定 一 个 不 透明 的 输入 源 : 
<feBlend in="A" in2="B" mode="m"/>, 下 面 并 述 了 每 种 模式 的 结果 像素 的 频 色 ， 

















。 normal 


只 有 B; 和 <feComposite> 中 的 over 运算 符 一 样 。 





。 multiply 
顾名思义 ， 对 于 每 个 颜色 通道 ,将 A 的 值 和 B 的 值 相 乘 。 由 于 颜色 值 在 0~1 之 间 ， 所 
以 相 乘 会 让 它们 更 小 。 这 会 加 深 颜 色 ， 对 于 暗色 或 者 非常 强烈 的 颜色 ， 效 果 最 强烈 ， 如 
果 某 个 颜色 是 白色 则 没有 效果 。 其 效果 类 似 于 为 两 种 图 像 创建 一 个 幻灯 片 ， 然 后 在 同一 
幻灯 机 中 将 它们 县 放 在 一 起 一 一 最 后 只 有 同时 穿 过 两 者 的 光线 才 可 见 。 



































。 Screen 
把 每 个 通道 的 颜色 值 加 在 一 起 ， 然 后 减 去 它们 的 乘积 。 明 亮 的 颜色 或 者 浅 色 往往 会 比 暗 
色 占 优势 ， 但 是 相似 亮度 的 颜色 会 被 合并 。 这 个 效果 类 似 于 有 两 台 不 同 的 幻灯 机 ， 每 个 
图 像 用 一 个 幻灯 机 ， 然 后 照 在 同一 个 屏幕 上 台 幻 灯 机 的 强 者 光 会 压 过 另 一 台 幻 灯 
机 的 投影 。 








。 darken 


提取 A 和 了 B 的 每 个 通道 的 最 小 值 。 颜 色 较 暗 ， 因 此 得 名 。 


。 lighten 
提取 A 和 B 的 每 个 通道 的 最 大 值 。 颜 色 较 亮 ， 因 此 得 名 。 





注意 ， 每 个 红 、 绿 、 蓝 值 的 计算 都 是 独立 完成 的 。 因 此 ， 如 果 对 RGB 值 为 (100%, 0%， 
0%) 的 纯 红 色 方 块 和 RGB 值 为 (50%, 50%, 50%) 的 灰色 方块 使 用 darken， 结 果 颜 色 将 会 是 
(50%, 0%, 0%)。 如 果 输 入 源 不 是 不 透明 的 ， 那 么 所 有 的 模式 (除了 screen 因素 ) 在 计算 
时 都 会 计算 透明 度 。 


最 后 ， 一旦 颜色 值 计算 完成 ， 结 果 的 透明 度 就 由 公式 1 - (1 - opacity of A) * (1 - 
opacity of B) 决定 。 ee 公式 时 ， 两 个 不 透明 项 仍然 保持 不 透明 ， 而 两 个 不 透明 度 
为 50% 的 图 形 会 被 合并 为 一 个 ， 不 透明 度 变 为 75%。 


图 11-17 展示 了 将 一 个 不 透明 的 从 白色 到 黑色 的 渐变 条 分 别 eg 50% 
的 颜色 块 相 混合 的 结果 ， 颜 色 块 的 RGB 值 为 黑 (#000)、 黄 (#ff0)、 红 (#00)、 亮 绿色 
(#0c0) 以 及 次 蓝 色 (#009)。 














146 | 第 11 章 








iD 
i nornal 
国 二 二 二 天 Bultinly 
ES 
J EE 
用 二 1ioghten 











11-17: <feBlend> 的 效果 


11.8 <feFLood> 和 <feTiLe> 滤 镜 


<feFlood> 和 <feTile> 元 素 是 很 实用 的 滤 镜 。 它 们 很 像 <feoffset>， 人 允许 我 们 在 一 系列 滤 
镜 基 元 内 执行 某 些 常见 的 操作 ， 而 不 是 在 主 图 形 中 创建 额外 的 SVG 元 素 。 


























<feFlood> 提供 了 一 个 纯色 区 域 用 于 组 合 或 者 合并 。 我 们 只 需 提供 flood-color 和 flood- 
opacity， 然 后 滤 镜 会 完成 其 他 工作 。 


<feTile> 会 提取 输入 信息 作为 图 案 ， 然 后 横向 和 纵向 平 铺 填充 滤 镜 指定 的 区 域 。 图 案 的 尺 
寸 由 输入 给 <feTile> 的 尺寸 决定 。 




















示例 11-8 用 <feComposite> 裁剪 并 平 铺 了 整个 花 条 的 形状 区 域 。 用 于 平 铺 的 图 案 显 示 在 图 
11-18 的 右上 角 用 作 参 考 。 
































示例 11-8: <feFlood> 和 <feTile> 示例 
<defs> 
<filter id="flood-filter" x="0" y="0" width="100%" height="100%"> 
<feFlood flood-color="#993300" flood-opacity="0.8" result="tint"/> 
<feComposite in="tint" in2="SourceGraphic" 
operator="in"/> 
</filter> 


<filter id="tile-filter" x="0" y="0" width="100%" height="100%"> 
<feImage xlink:href="cloth.jpg" width="32" height="32" 
result="cloth"/> 
<feTile in="cloth" result="cloth"/> 
<feComposite in="cloth" in2="SourceGraphic" 
operator="in"/> 
</filter> 


<g id="flower"> 
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<!-- 这 里 绘制 花 人 条 图 形 - -> 
</g> 
</defs> 


<use xlink:href="#flower" transform="translate(0,0)" 
style="filter: url(#flood-filter);"/> 

<use xlink:href="#flower" transform="translate(110,0)" 
style="filter: url(#tile-filter);"/> 

<image xlink:href="cloth.jpg" x="220" y="10" 
width="32" height="32"/> 














11-18: <feFlood> 和 <feTile> 元 素 效果 


11.9 光照 效果 


如 果 用 SVG 绘制 一 个 亮 绿 色 的 圆 ， 看 起 来 就 像 一 个 从 交通 信号 灯 中 掉 下 来 的 灯 ， 它 自己 
发 着 光 ， 平 躺 在 屏幕 上 。 而 一 个 从 绿 纸 上 裁 剪 出 来 的 圆 形 则 看 起 来 会 更 “真实 ”， 因 为 它 
的 颜色 来 自 外 部 光照 ， 并 且 还 带 有 一 些 纹理 。 而 一 个 从 绿色 塑料 上 裁剪 下 来 的 圆 不 仅 有 
来 自 外 部 光照 产生 的 颜色 ， 它 本 身 还 反射 了 一 些 亮点 。 外 部 光照 使 物体 产生 颜色 称 为 漫 反 
射 ， 从 基 个 面 反射 亮点 的 效果 被 称 作 镜 面 反射 。 



































要 得 到 这 些 效果 ， 我 们 必须 指定 下 列 信息 : 


。 想 要 的 反射 类 型 (<feDiffuseLighting> 漫 反 射 或 者 <feSpecuLarLighting> 镑 面 反射 ) 

。 想 要 照 亮 的 对 象 

。 使 用 的 灯光 颜色 

。 想 要 的 光源 类 型 (<fePointLight> 点 光源 、<feDistantLight> 远 光 或 者 <feSpotLight> 
聚光灯 ) 以 及 它 的 位 置 


要 从 三 个 维度 指定 光源 位 置 。 这 意味 着 除了 x 和 ? 值 之 外 还 需要 一 个 4 正如 二 维 图 形 
一 样 ,x 轴 从 左 向 右 递增 , 轴 从 上 往 下 递增 。 而 = 轴 则 是 朝 “ 离 开 屏幕 ”指向 我 们 的 方向 
递增 。 


这 两 种 光照 效果 都 使 用 它们 照 亮 对 象 的 阿尔 法 通道 作为 凹凸 贴图 (bump map) ; 较 高 的 阿 
尔 法 值 被 假定 为 “ 凸 ”在 对 象 表面 之 上 。 
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11.9.1 漫 反射 照明 


演示 <feDiffuseLighting> 元 素 工 作 原 理 的 最 好 方式 就 是 直接 跳 到 示例 11-9， 
色 的 圆 形 上 发 出 了 淡 黄色 的 光 ， 曲 线 图 案 纹理 来 自 示 例 8-1。 


示例 11-9: 带 有 一 个 点 光源 的 漫 反 射 照 明 
<defs> 


<path id="curve" d="MO0QS 20 10 10T 20 20" 0 
style="stroke: black; fill: none;"/> 























<filter id="diff-light" color-interpolation-filters="sRGB" 
x="0" y="0" width="100%" height="100%"> © 


<feImage xlink:href="#curve" result="tile" 
width="20" height="20"/> © 


<feTile in="tile" result="tile"/> 


<feDiffuseLighting in="tile" @ 
lighting-color="#ffffcc" 
surfaceScale="1" 日 
diffuseConstant="0.5" 6) 
result="diffuseOutput"> [79 
<fePointLight x="0" y="50" z="50"/> 日 

</feDiffuseLighting> © 


<feComposite in="diffuseOutput" in2="SourceGraphic" 
operator="in" result="diffuseOutput"/> 四 


<feBLend in="diffuseOutput" in2="SourceGraphic" 
mode="screen"/> 1) 
</filter> 
</defs> 


<circle id="green-light" cx="50" cy="50" r="50" 
style="fill: #060; filter: url(#diff-light)"/> ©@® 





@ 定义 用 作 图 案 的 曲线 。 
@ 设置 颜色 插值 方法 和 滤 镜 边界 。 
加 用 curve 图 像 平 铺 滤 镜 区 域 。 这 会 变 成 是 凸 贴图 。 














它 在 一 个 绿 


@ 这 个 平 铺 区 域 会 输入 到 <fepiffuseLighting> 元 素 中 ， 还 给 它 加 了 一 个 浅黄 色 的 光照 





正如 Lighting-color 属性 中 所 指定 的 。 








@ surfacescale 属性 代表 阿尔 法 值 为 1 时 表面 的 高 度 (更 通用 的 说 法 是 ， 它 是 计算 阿尔 法 

















六 


值 时 的 乘积 





子 )。 





@ diffuseConstant 是 一 个 用 于 确定 像素 最 终 RGB 值 的 乘积 因子 。 它 的 值 必须 大 于 或 等 于 
0， 默 认 值 为 1。 要 让 lighting-color 更 明亮 ， 这 个 值 就 应 该 更 小 (除非 我 们 想 要 图 片 


褪色 ) 。 
包 这 个 滤 镜 的 结果 将 被 命名 为 diffuseOutput。 
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@ 这 个 例子 用 了 一 个 点 光源 ， 意 味 着 光源 的 光 会 辐射 到 所 有 方向 。 而 我 们 希望 它 照 亮 在 滤 
镜 区 域 的 左上 角 ， 并 且 在 屏幕 的 50 单位 前 。 设 置 光 源 离 对 象 越 远 ， 对 象 被 照 亮 得 越 均 
名。 在 这 个 例子 中 ， 光 线 距 离 越 近 ， 获 得 的 效果 越 明显 。 

© <feDiffuseLighting> 元 素 结 束 。 

@ 用 <feComposite> 的 in 属性 裁剪 滤 镜 的 输出 到 源 图 形 ( 圆 ) 的 边界 。 

@ 最后，<feBlend> 设置 为 screen 模式 ， 它 会 尝试 让 源 图 形变 亮 ， 这 是 滤 镜 的 最 后 部 分 。 

@ 在 想 要 的 对 象 上 启用 滤 镜 ， 生 成 图 11-19。 




















eT 























11-19: 应 用 漫 反射 照明 的 滤 镜 效果 








这 个 滤 镜 的 输入 信息 是 一 个 包含 四 个 颜色 分 量 的 图 形 ， 但 只 有 阿尔 
法 通道 被 使 用 了 。 然 而 ， 当 我 (David) 插入 一 个 <feCoLorMatrix 
type="LuminanceToALpha"> 并 用 它 的 输出 作为 滤 镜 的 输入 时 ， 并 没有 得 到 想 
要 的 效果 。 记 住 ，LuminanceToALpha 会 把 黑色 区 域 ( 零 亮 度 ) 转换 为 完全 透 
明 的 〈 零 阿尔 法 )。 从 阿尔 法 级 别 看 黑色 曲线 图 案 和 透明 空 背 景 之 间 毫 无 差 
异 ， 所 以 这 个 照明 效果 没有 任何 对 应 的 纹理 。 












































11.9.2 ”镜面 反射 照明 


换 句 话说， 镜面 照明 就 是 提供 亮点 而 不 是 照明 。 示 例 11-10 演示 了 它 的 工作 原理 。 
示例 11-10: 远 光 镜面 反射 照明 


<defs> 


<path id="curve" d="MO0QS5 ?20 10 10T20 20" 
style="stroke: black; fill: none;"/> 0 


<filter id="spec-light" color-interpolation-filters="sRGB" 
x="0" y="0" width="100%" height="100%"> © 


<feImage xlink:href="#curve" result="tile" 
width="20" height="20"/> 【3) 


<feTile in="tile" result="tile"/> 


<feSpecularLighting in="tile” @ 
lighting-color="#ffffcc" 
surfaceScale="1" 日 
specularConstant="1" (6) 
specularExponent="4" 7 
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result="specularOutput"> © 
<feDistantLight elevation="25" azimuth="0"/> © 
</feSpecularLighting> 四 


<feComposite in="specularOutput" in2="SourceGraphic" 
operator="in" result="specularOutput"/> 四 


<feComposite in="specularOutput" in2="SourceGraphic" 
operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/> 四 
</filter> 
</defs> 


<circle id="green-light" cx="50" cy="50" r="50" 
style="fill: #060; filter: url(#spec-light)"/> ©@® 


@ 和 前 面 的 例子 一 样 ， 定 义 曲线 。 

@ 与 前 一 个 例子 的 唯一 区 别 是 滤 镜 名 称 。 

人 @ 和 前 面 的 例子 一 样 ， 这 部 分 平 铺 曲 线 。 

@ 开始 定义 <fespecularLighting> 滤 镜 ， 指 定 Lighting-color 为 淡 黄 色 。 

@ surfacescale 属性 代表 阿尔 法 值 为 1 时 表面 的 高 度 (更 通用 的 说 法 是 ， 它 是 计算 阿尔 法 
值 时 的 乘积 因子 )。 

@ specularConstant 是 一 个 用 于 确定 像素 最 终 RGB 值 的 乘积 因子 。 它 的 值 必须 大 于 或 等 
于 0， 默 认 值 为 1。 要 让 Llighting-color 更 明亮 ， 这 个 值 就 应 该 更 小 。 这 个 数字 的 效果 
也 可 以 通过 specularExponent 属性 来 缓和 。 

@ specularExponent 是 用 来 确定 像素 最 终 RGB 值 的 另 一 个 因子 。 这 个 属性 的 值 必须 是 0 
到 128 之 间 的 数字 ， 上 默认 值 是 1。 数 字 越 大 ， 结 果 越 “明亮 ”。 

@ 这 个 滤 镜 的 结果 将 被 命名 为 specuLarOutput。 

这 个 例子 用 了 一 个 远 光 源 ， 离 图 像 足 够 远 ， 因 而 光照 射 到 图 片 所 有 部 分 的 角度 都 一 样 。 
所 以 这 里 不 是 指定 光源 的 位 置 ， 而 是 指定 光线 来 源 的 角度 。 
elevation 和 azimuth 属性 允许 我 们 从 三 个 维度 指定 角度 。elevation 提供 了 屏幕 平面 上 
光 的 角度 : elevation="9" 表示 光线 平行 于 整个 图 像 ， 而 elevation="90" 表示 光线 直射 
下 来 。 
azimuth 属性 在 平面 内 指定 了 角度 ， 当 elevation 为 0 时 ，azimuth="0" 指定 光线 从 图 像 
右 侧 来 (更 普遍 的 说 法 是 x 轴 正 值 结束 处 ) ;azimuth="99" 表示 从 底部 (y 轴 正 值 结束 
处 ) 来 ，azimuth="180" 表示 从 左 侧 来 ，azimuth="270" 表示 从 顶部 来 。 

四 <fespecularLighting> 元 素 结束 。 注 意 ， 这 个 滤 镜 的 输入 信息 是 一 个 阿尔 法 通道 ， 而 输 
出 包含 阿尔 法 和 颜色 信息 (不 像 <fepiffuseLighting>， 总 是 生成 一 个 不 透明 的 结果 )。 

@@ <feComposite> 的 in 属性 裁剪 滤 镜 的 输出 到 源 图 形 ( 圆 ) 的 边界 。 

@@ 最 后 ， 用 <feComposite> 的 arithmetic 运算 符 将 光照 和 源 图 像 琶 加 。 

@ 在 圆 形 上 启动 滤 镜 ， 生 成 如 图 11-20 所 示 的 高 亮 浮雕 效果 。 
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11-20: 应 用 镜面 照明 的 滤 镜 效 果 


关于 从 三 个 维度 创建 光照 效果 ， 有 一 个 优秀 的 教程 : http://www.webreference. 
com/3d/lesson12/。 我 们 只 学 习 了 两 个 维度 ， 但 大 部 分 信息 都 是 适用 的 。 








第 三 种 光源 类 型 是 <fespotLight>， 用 这 些 属性 来 指定 : x、y 和 z， 聚 光 灯 的 位 置 ( 默 
认 值 为 0) ; pointsAtX、pointsAtY 和 pointsAtz， 聚 光 灯 指向 的 地 点 (上 默认 值 为 0)， 
specularExponent， 控 制 光源 焦点 的 值 (默认 值 为 1) ; 以 及 limitingConeAngle， 用 于 约 
束 光 线 投射 的 范围 。 这 是 聚光灯 轴 和 和 锥 形 之 间 的 角度 。 因 此 ， 如 果 我 们 想 要 蔓延 整个 锥 30 
度 角 ， 指 定 角度 为 15 即 可 (默认 值 允 许 无 限 蔓延 ) 。 


‘ 记 1 4b 
11.10 ”访问 背景 
除了 SourceGraphic 和 SourceAlpha 滤 镜 输入 之 外 ， 当 我 们 调用 一 个 滤 镜 时 ， 滤 镜 对 象 
还 可 以 访问 已 经 演 染 到 画布 上 的 图 片 的 某 一 部 分 。 这 部 分 被 称 为 BackgroundImage (不 
是 BackgroundGraphic) 和 BackgroundAlpha。 为 了 访问 这 些 输入 信息 ， 滤 镜 对 象 必 须 位 于 
enable-background 属性 值 为 new 的 容器 元 素 之 内 。 示 例 11-11 演示 了 在 背景 图 像 上 执行 高 
斯 模糊 。 


示例 11-11: 访问 背景 图 像 
<defs> 
<filter id="bLur-background"> ©@ 
<feGaussianBlur in="BackgroundImage" stdDeviation="2" result="blur"/> 
<feComposite in="blur" in2="SourceGraphic" operator="in" /> 
<feOffset dx="4" dy="4" result="offsetBlur"/> 
</filter> 
</defs> 














<g enable-background="new"> 
<rect x="0" y="0" width="60" height="60" 
style="fill: lightblue; stroke: blue; stroke-width: 10" /> © 
<circle cx="40" cy="40" r="30" 
style="fill: #fff; filter: url(#blur-background);" /> ©@ 
</g> 


@ 类 似 用 于 投影 的 模糊 滤 镜 ， 只 是 输入 信息 是 BackgroundImage 而 不 是 SourceALpha。 





@ 由 于 <g> 是 一 个 容器 元 素 ， 在 这 里 放置 enable-background 是 一 个 完美 的 选择 。 它 所 有 
的 子 元素 都 可 以 利用 背景 图 像 和 阿尔 法 信息 。 


@ 把 算 形 绘制 到 画布 上 

















， 然 后 进入 背景 缓冲 区 里 。 


@ 同形 不 会 直接 显示 ; 滤 镜 会 模糊 背景 图 像 (不 包括 圆 形 )， 然 后 合成 in 属性 值 








SourceGraphic。 图 11-21 展示 了 结果 。 



































11-21; 访问 背景 图 像 的 效果 


在 写作 本 





让 时 ， 还 没有 浏览 器 实现 enable-background 或 者 BackgroundImage 


和 BackgroundALpha 输入 。 如 果 在 不 支持 它们 的 浏览 器 中 在 滤 镜 内 使 用 这 些 
输入 ， 滤 镜 不 会 返回 任何 信息 一 一 这 意味 着 图 形 的 滤 镜 部 分 会 消失 。 














一 种 替代 的 方式 是 分 离 背 景 到 <g> 元 素 中 ， 然 后 用 <feImage> 把 它 导入 到 滤 
镜 中 。 以 这 种 方式 修改 后 的 示例 11-11 代码 如 下 : 


<defs> 


<filter id="blur-background"> 
<feImage xlink:href="#background" result="bg"/> 
<feGaussianBlur in="bg" stdDeviation="2" result="blur" /> 
<feComposite in="blur" in2="SourceGraphic" operator="in" /> 
<feOffset dx="4" dy="4" resuLt="offsetBLur" /> 

</filter> 


</defs> 


<g id="background"> 


<rect 


x="0" y="Q" width="60" height="60" 


style="fill: lightblue; stroke: blue; stroke-width: 10"/> 


</g> 
<circle 


cx="40" cy="40" r="30" 


style="fill: #fff; filter: url(#blur-background);" /> 








在 支持 使 用 SVG 片段 <feImage> 的 浏览 器 中 ， 其 结果 和 图 11-21 一 样 (目前 


在 Mozilla 











FireFox 中 行 不 通 )。 


11.11 <feMorphology> 元 素 
<feMorphology> 元 素 人 允许 我 们 对 图 形 进行 “瘦身 ”或 者 “加 厚 "。 可 以 指定 operator 值 为 








erode 来 给 图 形 瘦 身 ， 或 者 指定 为 diLate 来 加 厚 图 形 。radius 属性 用 来 告诉 我 们 增 厚 或 者 


变 薄 了 多 少 。 正 如 在 图 
严重 的 破坏 。 











11-22 中 可 以 看 到 的 ， 在 细 线 条 图 形 上 使 用 瘦身 效果 会 对 绘图 造成 
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示例 11-12: 使 用 <feMorphology> 对 图 形 进行 瘦身 或 者 加 厚 
http://oreillymedia.github.io/sve-essentials-examples/ch1ll/fe_morphology.html 


<defs> 
<g id="cat" stroke-width="2"> 
<!-- 这 里 绘制 猫 图 形 --> 
</g> 














<filter id="erode1 "> 
<feMorphology operator="erode" radius="1"/> 
</filter> 


<filter id="dilate2"> 
<feMorphology operator="dilate" radius="2"/> 
</filter> 
</defs> 


<use xlink:href="#cat"/> 
<text x="75" y="170" style="text-anchor: middle;">Normal</text> 


<use xlink:href="#cat" transform="translate(150,0)" 
style="filter: url(#erode1);"/> 
<text x="225" y="170" style="text-anchor: middle;">Erode 1</text> 


<use xlink:href="#cat" transform="translate(300,0)" 
style="filter: url(#dilate2);"/> 
<text x="375" y="170" style="text-anchor: middle;">Dilate 2</text> 





正常 瘦身 1 加 厚 2 








图 11-22: 使 用 <feMorphology> 的 效果 


11.12 ”<feConvolveMatrix> 元 素 


<feConvolveMatrix> 元 素 人 允许 我 们 按照 它 邻 近 的 像素 计算 像素 的 新 值 。 这 个 滤 镜 允许 我 们 
生成 诸如 模糊 、 锐 化 、 浮 有 雕 和 斜 切 这 样 的 效果 。 它 的 原理 是 合并 像素 和 它 邻 近 的 像素 ， 生 

















成 结果 像素 值 。 想 象 一 下 像素 P 和 其 8 个 邻近 的 像素 如 下 所 示 (这 个 滤 镜 的 常见 情况 ) : 


在 kerneUatrix 属性 中 指定 9 个 因数 即 可 。 这 些 数字 代表 每 个 像素 乘 以 多 少 。 这 些 结果 





由 





和 
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被 累加 ， 总 数 很 有 可 能 大 于 1 (比如 当 所 有 的 因数 都 是 正 值 时 )， 因 此 ， 为 了 均匀 强度 ， 结 
果 还 要 除 以 因数 总 和 。 假 设 我 们 指定 如 下 9 个 数字 (为 了 展示 它们 是 一 个 矩阵 ， 数 字 之 进 
行 了 间隔 ) : 





<feConvolveMatrix kernelMatrix=" 
人 了 之 
3 4 5 
6 7 8"/> 


像素 P 的 新 值 将 是 如 下 所 示 : 


P' = ((9x*A) + (1*B) + (2*C) + 
(3*D) + (4*P) + (5xE) + 
(6*F) + (7*G) + (8*H)) / (0+1+2+3+4+5+6+7+8) 


唯一 的 例外 是 如 果 所 有 甜 阵 值 总 和 为 0， 则 不 会 执行 除法 。 


我 们 还 可 以 指定 一 个 bias 属性 ， 它 通过 为 每 个 像素 添加 指定 的 偏 移 值 来 改变 汪 镜 的 输出 范 
围 。bias 会 在 除法 后 面 计算 ， 但 是 在 最 终 调整 结果 到 0~1 这 个 有 效 范 围 之 前 。 





示例 11-13 通过 每 个 像素 的 左上 角 减 去 右 下 角 实 现 了 如 图 11-23 所 示 的 浮雕 效果 。”0.5 的 
bias 值 会 在 kernalMatrix 进行 求 和 和 除法 运算 之 后 加 上 去 。 偏 差 值 导致 那些 左上 角 和 右 下 
角 邻 近 像 素 相同 的 像素 显示 为 灰色 (与 没有 偏差 值 改变 的 黑色 不 同 )。 显 示 上 暗色 时 ， 左 上 
角 的 邻近 像素 比 左下 角 的 邻近 像素 更 亮 ， 而 显示 亮色 时 ， 左 下 角 的 邻近 像素 更 亮 。 结 果 ， 
对 角 边 缘 被 突出 显示 ， 就 像 图 像 被 举 起 并 从 旁边 照 亮 了 。 透 明 的 背景 像素 被 认为 是 黑色 。 


<feConvolveMatrix> 的 默认 行为 是 对 所 有 颜色 分 量 进行 计算 ， 包 括 阿尔 法 通道 。 在 这 个 
前 提 下 ， 只 有 每 个 形状 的 边缘 部 分 ， a at nal ne 
素 的 阿尔 法 值 更 高 时 ， 才 会 显示 出 来 。 为 了 只 对 红 、 绿 、 蓝 三 个 值 进 行 计算 ， 要 指定 
preserveAlpha 为 true; 它 的 默认 值 为 false。 














示例 11-13: <feConvolveMatrix> 的 浮雕 效果 


<defs> 
<filter id="emboss"> 
<feConvolveMatrix 
preserveAlpha="true" 
kernelMatrix="1 0000000 -1" 
bias="0.5"/> 
</filter> 


<g id="flower"> 
<!-- 这 里 绘制 花 杀 图 形 --> 
</g> 














注 3: 在 1.7 版 的 Apache Batik 上 测试 时 ， 滤 镜 包 含 元 素 会 导致 演 染 错误 ， 在 浏览 器 中 进行 测试 时 这 个 例子 
会 按照 预期 运行 。 
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</defs> 


<use xlink:href="#flower" style="filter: url(#emboss);"/> 














11-23; 使 用 <feConvolveMatrix> 的 效果 


虽然 默认 和 矩阵 规格 是 三 列 三 行 ， 但 我 们 可 以 用 order 属性 指定 任意 想 要 的 规格 。 如 果 指 定 
order="4"， 那 么 矩阵 的 kernelMatrix 属性 中 就 需要 16 个 数字 (4 乘 4)。 三 列 两 行 的 拢 
阵 要 通过 order="3 2" 的 形式 指定 ， 需 要 6 个 数字 。 和 抑 阵 越 大 ， 生 成 结果 所 需要 的 计算 就 
越 多 。 


对 于 图 形 中 间 的 像素 ， 很 容易 确定 邻近 像素 。 那 么 图 形 边 缘 的 像素 怎么 办 ? 它们 的 邻近 像 
素 是 什么 ? 这 由 我 们 提供 的 edgeMode 属性 决定 。 如 果 设 置 它 的 值 为 dupLicate (默认 值 )， 
那么 <feConvoLveMatrix> 会 复制 所 需 方 向 上 的 边缘 值 生成 邻近 值 。 值 wrap 则 会 绕 到 相反 
的 一 侧 找 到 邻近 值 。 比 如 ， 顶 部 像素 的 邻近 值 在 底部 ， 左 边缘 像素 左 侧 邻 近 值 的 像素 在 右 
边缘 。 如 果 图 片 被 用 作 重复 的 平 铺 图 案 ， 则 这 一 行为 很 有 用 。 值 none 会 为 所 有 缺失 的 邻近 
值 提 供 一 个 透明 的 黑色 像素 ( 红 、 绿 、 蓝 和 阿尔 法 值 都 为 0)。 

































































<feConvotveMatrix> 可 能 产生 的 所 有 效果 ， 这 里 不 可 能 一 一 描述 。 可 以 在 在 线 示例 中 进行 尝试 ， 
看 看 会 产生 什么 效果 : http://oreillymedia.github.io/svg-essentials-examples/ch11/convolve.html。 


11.13 <feDisplacementMap> 元 素 


这 个 神奇 的 滤 镜 使 用 第 二 个 输入 的 颜色 值 决 定 在 第 一 个 输入 中 移动 像素 的 距离 。 我 
们 可 以 用 xCchannelselector 属性 指定 应 该 用 哪个 颜色 通道 来 影响 像素 的 x 坐标， 用 
yChannelselector 属性 指定 用 哪个 颜色 通道 来 影响 y 坐标 。 这 些 选择 器 的 合法 值 是 "R"、 
"G"、"B"、"A”( 也 就 是 阿尔 法 通道 )。 还 必须 指定 移动 像素 的 距离 ，scale 属性 用 于 指定 缩 
放 因 子 。 如 果 不 指定 这 个 属性 ， 滤 镜 什 么 都 不 做 。 


示例 11-14 中 创建 了 一 个 渐变 矩形 作为 第 二 个 输入 。 位 移 缩放 因子 设置 为 10， 红 色 通 道 会 
被 用 作 x 偏 移 ， 绿 色 通 道 会 被 用 作 y 偏 移 。 图 11-24 展示 了 给 花 杂 应 用 这 个 位 移 的 结果 。 


示例 11-14: 使 用 渐变 作为 位 移 映射 
<defs> 
<linearGradient id="gradient"> 
<stop offset="0" style="stop-color: #ff0000;" /> 
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<stop offset="0.5" style="stop-color: #00ff00;"/> 
<stop offset="1" style="stop-color: #000000;"/> 
</LinearGradiLent> 


<rect id="rectangle" x="0" y="0" width="100" height="200" 
style="fill: url(#gradient);"/> 


<filter id="displace"> 
<feImage xlink:href="#rectangle" result="grad"/> 


<feDisplacementMap 
scale="10" 
xChannelSelector="R" 
yChannelSelector="G" 
in="SourceGraphic" in2="grad"/> 
</filter> 
<g id="flower"> 














<!-- 这 里 绘制 花 打 图 形 --> 
</g> 
</defs> 


<use xlink:href="#flower" style="filter: url(#displace);"/> 














11-24: 使 用 <feDisplacementMap> 的 效果 


还 可 以 对 两 个 输入 使 用 同一 图 形 。 这 意味 着 图 形 的 位 移 由 它 自己 的 着 色 控制 。 








的 效果 如 图 11-25 所 示 ， 相 当 古 怪 。 
示例 11-15: 使 用 图 形 作为 自身 的 位 移 映 射 


<defs> 
<filter id="self-displace"> 
<feDisplacementMap 
scale="10" 
xChannelSelector="R" 
yChannelSelector="G" 
in="SourceGraphic" in2="SourceGraphic"/> 
</filter> 


<g id="flower"> 

<!-- 这 里 绘制 花 杂 图 形 --> 
</g> 
</defs> 





<use xlink:href="#flower" style="filter: url(#self-displace);"/> 


示例 11-14 
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11-25: 同一 图 形 用 作 两 个 输入 的 效果 


11.14 <feTurbulence> 元 素 


<feTurbulence> 元 素 允 许 我 们 通过 使 用 由 Ken Perlin 开发 的 方程 ， 生 成 大 理 石 、 云 彩 等 人 
工 纹 理 效果 。 这 个 方程 被 称 作 Perlin noise (http://freespace.virgin.net/hugo.elias/models/m_ 
perlin.htm)。 我 们 要 指定 以 下 属性 。 




















。 type 
turbulence 和 fractalNoise 之 一 。 后 者 显示 更 平滑 。 


。 baseFrequency 
给 这 个 属性 值 的 数字 越 大 ， 结 果 颜 色 的 变化 越 快 。 这 个 数值 必须 大 于 0 且 应 该 小 于 1。 
还 可 以 给 这 个 属性 提供 两 个 数字 ， 第 一 个 将 被 作为 x 方向 的 频率 ， 而 第 二 个 将 被 作为 y 
方向 的 频率 。 

。 NumOctaves 
这 是 噪音 函数 使 用 的 数值 ， 生 成 最 终结 果 时 应 该 加 上 这 个 数值 。 数 值 越 大 ， 纹 理 粒度 越 
细 。 默 认 值 为 1。 





。 seed 


这 个 着 镜 使 用 的 随机 数 生成 属 的 种 子 。 默 认 值 为 0， 改变 它 可 以 得 到 一 些 不 同 的 结果 。 











图 11-26 是 一 个 SVG 文件 演示 前 三 个 属性 的 不 同 值 的 截图 。 





- SS 有 本 
ww Fj “a 
KR » a -a 
EF ~ 二 守 % S .> 
type="turbulence” type="turbulence” type="turbulence”" 
baseFrequency="0.1” baseFrequency="0.1” baseFrequency="0.05" 
numOctaves="1" numOctaves="5" numOctaves="5" 
* 
Po | 
type= "fractalNoise” type= "fractalNoise” type= "fractalNoise” 
baseFrequency="0.1” baseFrequency="0.1” baseFrequency="0.05" 
numOctaves= "1” numOctaves="5" numOctaves="5" 








11-26: <feTurbulence> 属性 的 各 种 值 
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在 线 示例 中 可 以 尝试 所 有 这 三 个 参数 : 


http://oreillymedia.github.io/svg-essentials-examples/ch1 1/turbulence.html 


11.15 滤 镜 总 结 
<filter> 元 素 包含 一 系列 滤 镜 基 元 ， 每 个 都 接受 一 个 或 多 个 输入 ， 同 时 提供 了 唯一 的 结果 





























供 其 他 滤 镜 使 用 。 一 系列 滤 镜 中 最 后 一 个 滤 镜 的 结果 会 呈现 到 最 终 的 图 形 上 。 我 们 用 x、 


y、width 和 height 属性 指定 应 用 小 镜 的 画布 的 尺寸 。 用 filterunits 指定 用 来 定义 着 镜 范 
围 的 单位 ， 用 primitiveUnits 为 滤 镜 基 元 中 的 各 种 长 度 值 指定 坐标 系统 。 


表 11-1 进行 了 滤 镜 总 结 。 每 个 滤 镜 基 元 元 素 都 有 一 个 in 属性 用 来 提供 基 元 来 源 ， 还 可 以 
指定 x、y、width 和 height。 





表 1 1s4 : 滤 镜 总 结 














元 到 属 性 

<feBLend> in2="second source" 
mode="normal"” | "multiply"” | "screen"” | "darken” | "lighten" (默认 是 
normal) 

<feColorMatrix> type="matrix" | "saturate" | "hueRotate" | "luminanceToAlpha" 
values="matrix values" | "saturation value(0-1) | "rotate degrees" 


<feComponentTransfer> 


<feFuncX> 


<feComposite> 


<feConvolveMatrix> 


<feDiffuseLighting> 


<feFuncR>、<feFuncG>、<feFuncB> 和 <feFuncA> 元 素 的 容器 


type="identity" | "table" | "discrete" | "linear" | "gamma" 
tableValues="intervals for table, steps for dicrete" 
slope="linear slope" 

intercept="linear intercept" 

amplitude="gamma amplitude" 

exponent="gamma exponent" 

offset="gamma offset" 


in2="second source" 


in" | "out" | "atop" | 
下 列 属性 用 于 arithmetic ( 没 指定 的 属性 的 默认 值 都 为 0) : 
k1="factor for ini * in2" 

k2="factor for ini" 

k3="factor for in2" 

k4="additive offset" 


operator="over" | xor" | "arithmetic" 








order="colums rows" (默认 为 3x3) 
kernel="values" 

bias="offset value" 

光源 元 素 的 容器 

surfaceScate="hetight" (默认 为 1) 
diffuseConstant="factor" (必须 为 正 数 ， 默 认为 1) 
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元 目 由 过 


S 


属 性 





<feDisplacementMap> 


<feFLood> 


<feGaussianBlur> 


<feImage> 


<feMerge> 
<feMergeNode> 


<feMorphology> 


<feoffset> 


<feSpecularLighting> 


<feTile> 


<feTurbulence> 


<feDistantLight> 


<fepointLight> 


<feSpotLight> 


scale="displacement factor" (默认 为 0) 
xChannelSelector="R" | "G" | "B" | "A" 
yChannelSelector="R" | "G" | "B"” | "A" 

in2="second input" 

flood-color="color specification" 

flood-opacity="value (0-1)" 

stdDeviation="blur spread”( 值 越 大 越 模糊 ， 默 认为 0) 


xlink:href="/getfile?safari4=trueitem=/images/9781491945308/assets/image 
source" 


PR 


<feMergeNode> 元 素 的 容器 

in="intermediate result" 

operator="erode" | "dilate" 

radius="x-radius y-radius" 

radius="radius" 

dx="x offset" (默认 为 0) 

dy="y offset" (默认 为 0) 

光源 元 素 的 容器 

surfaceScale="height” (默认 为 1) 
specuLarConstant="factor" (必须 为 正 数 ， 默 认为 1) 
specuLarExponent="exponent" (1~128 之 间 的 值 ， 默 认为 1) 
in 的 平 铺 图 案 


type="turbulence" | "fractalNoise" 





baseFrequency="x-frequency y-frequency" 
baseFrequency="frequency" 
numOctaves="integer" 

seed="number" 

azimuth="degrees” (默认 为 0) 
elevation="degrees (默认 为 0) 


x="coordinate" 
y="coordinate" 


( 

( 
z="coordinate"” (默认 为 

( 

( 


x="coordinate" 


z="coordinate" (默认 为 
pointsAtX="coordinate" (默认 为 0) 
默认 为 0) 
pointsAtZ="coordinate" (默认 为 0) 
specularConstant="focus control"” (默认 为 1) 


limitingConeAngle="degrees" 


0 
0 
0 
y="coordinate" (默认 为 0 
0 
( 
pointsAtY="coordinate" ( 
( 
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到 目前 为 止 ， 我 们 所 看 到 的 图 像 都 是 静态 图 像 ， 一 旦 构建 好 就 永远 不 会 改变 。 本 章 ， 我 们 
将 会 分 析 两 种 让 图 像 动 起 来 的 方法 。 第 一 种 方法 是 基于 SMIL 的 动画 ， 应 该 用 于 描述 构成 
图 形 基本 组 成 部 分 的 动画 ， 且 这 个 动画 可 以 提前 定义 好 。CSS 动画 应 该 用 于 一 些 风格 效果 
和 简单 的 反馈 (比如 聚焦 或 者 悬 停 时 高 亮 元 素 ) 。 脚 本 应 该 用 于 更 复杂 的 交互 ， 我 们 会 在 
第 13 章 中 讲述 。 


上 一 章 ， 我 们 建议 将 滤 镜 用 作 增 强 图 形 信息 的 一 种 手段 ， 而 不 应 作为 结果 。 这 一 建议 对 动 
画 来 说 更 为 重要 。 借 助 动 画 的 能 力 ， 你 可 能 会 想 要 把 每 一 个 图 形 都 变 成 百老汇 那样 载 歌 载 
舞 的 景象 。 如 果 你 的 目标 只 是 实验 ， 这 并 设 有 什么 问题 。 但 是 ， 如 果 你 的 目标 是 传达 一 个 
信息 ， 那 么 使 用 不 必要 的 动画 或 者 过 度 使 用 动画 都 是 非常 糟糕 的 。 我 们 再 讲 清楚 点 儿 : 除 
了 公司 的 CEO 之 外 ， 没 有 人 有 兴趣 重复 观看 一 个 旋转 的 、 闪 烁 的 、 颜 色 不 断 变化 的 、 冈 
光 灯 式 的 公司 Logo。 


本 章 主要 讲述 动画 ， 因 此 大 部 分 例子 将 不 使 用 任何 内 容 ， 当 然 ， 也 会 尽量 避免 不 必要 的 或 
者 过 分 雕琢 的 动画 。 








下 浏览 器 (包括 正 11， 编 写本 章 时 的 最 新 版 ) 还 不 支持 基于 SMIL 的 动画 或 
者 给 SVG 元 素 应 用 动画 。 但 是 基于 JavaScript 的 解决 方案 ， 比 如 SMILscript 
(http://schepers.cc/svg/smilscript/) 以 及 FakeSMILe (http://leunen.me/fakesmile/), 
可 以 把 基于 SMIL 的 动画 转换 为 基于 脚本 的 动画 在 更 中 使 用 。 
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12.1 动画 基础 


SVG 的 动画 特性 基于 万 维 网 联盟 的 “同步 多 媒体 集成 语言 ”(SMIL) 规范 (http://www. 
w3.org/TR/SMIL3/)。 在 这 个 动画 系统 中 ， 我 们 可 以 指定 想 要 进行 动画 的 属性 (比如 颜色 、 
动作 或 者 变形 属性 ) 的 起 始 值 和 结束 值 ， 以 及 动画 的 开始 时 间 和 持续 时 间 。 示 例 12-1 给 
了 一 个 基本 示例 代码 。 








示例 12-1: 收缩 矩形 


http://oreillymedia.github.io/sve-essentials-examples/ch12/simple_animation.html 


<rect x="10" y="10" width="200" height="20" stroke="black" fill="none"> 
<animate 
attributeName="width" 
attributeType="XML" 
from="200" to="20" 
begin="0s" dur="5s" 
fill="freeze" /> 
</rect> 





首先 需要 注意 的 是 <rect> 元 素 不 再 是 一 个 空 元 素 ， 它 里 面包 含 了 动画 元 素 。 
<animate> 元 素 指 定 了 下 列 信息 。 


。 _ attributeNane， 动 画 中 应 该 持续 改变 的 值 ， 在 这 里 就 是 width。 

。 attributeType。width 属性 是 一 个 XML 属性 。 另 一 个 常用 的 attributeType 值 是 CSS， 
表示 我 们 想 要 改变 的 属性 是 一 个 CSS 属性 。 如 果 忽 略 这 一 属性 ， 它 的 默认 值 是 auto; 
它 首 先 会 搜索 CSS 属性 ， 然 后 才 是 XML 属性 。 

。 属性 的 起 始 (from) 和 结束 (to) 值 。 在 这 个 例子 中 ， 起 始 值 是 200， 结 束 值 是 20。 
from 值 是 可 选 的 ， 如 果 不 指 定 ， 则 会 使 用 父 元 素 的 值 。 此 外 ， 还 有 一 个 by 属性 ， 可 以 
代替 to， 它 是 一 个 从 fron 值 开始 的 偏 移 量 ， 动 画 结 束 时 属性 的 值 为 结束 值 。 

。 动画 的 开始 时 间 和 持续 时 间 。 在 这 个 例子 中 ， 时 间 以 秒 为 单位 ， 通 过 在 数字 后 面 使 用 s 

指定 。 定 义 时 间 的 其 他 方式 会 在 12.2 节 中 描述 。 

。 动画 结束 时 做 什么 。 在 这 个 例子 中 ， 持 续 5 秒 之 后 ， 属 性 会 “冻结 ”(freeze) 为 to 值 。 
也 就 是 SMIL fnLL 属性 ， 它 会 告诉 动画 引擎 如 何 填 补 剩 下 的 时 间 。 不 要 把 它 跟 SVG 的 
fnL 属性 混 消 了 ， 该 属性 用 于 告诉 SVG 如 何 描绘 对 象 。 如 果 我 们 移 除 这 一 行 ， 会 使 用 
默认 值 (remove) ，5 秒 的 动画 完成 之 后 width 属性 会 返回 它 的 原始 值 200。 













































































很 好 地 展示 实际 效果 ， 因 此 





CC 


12-1 和 图 12-2 展示 了 动画 的 开始 和 结束 阶段 。 它 们 并 不 和 
我 们 强烈 建议 你 在 浏览 器 中 试 试 。 




















| 








图 12-1: 动画 开始 
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口 











12-2: 动画 结束 


示例 12-2 更 复杂 一 些 。 它 从 一 个 20 乘 20 的 绿色 方块 开始 ， 将 在 8 秒 的 时 间 里 增长 为 250 
乘 200。 前 3 秒 ， 绿 色 的 透明 度 会 增加 ， 接 下 来 3 秒 会 减 小 。 注 意 fill-opacity 是 使 用 
attributeType="CSS" 的 ， 因 为 它 设置 在 style 属性 中 。 





示例 12-2: 单个 对 象 上 的 多 重 动画 


http://oreillymedia.github.io/sve-essentials-examples/ch12/multiple_animation.html 


<rect x="10" y="10" width="20" height="20" 
style="stroke: black; fill: green; style: fill-opacity: 0.25;"> 
<animate attributeName="width" attributeType="XML" 
from="20" to="200" begin="0s" dur="8s" fill="freeze"/> 
<animate attributeName="height" attributeType="XML" 
from="20" to="150" begin="0s" dur="8s" fill="freeze"/> 
<animate attributeName="fill-opacity" attributeType="CSS" 
from="0.25" to="1" begin="0Qs" dur="3s" fill="freeze"/> 
<animate attributeName="fill-opacity" attributeType="CSS" 
from="1" to="0.25" begin="3s" dur="3s" fill="freeze"/> 
</rect> 


最 后 一 个 简单 的 例子 是 示例 12-3， 一 个 正方 形 和 圆 形 动画 。 正 方形 尺寸 会 在 8 秒 的 时 间 里 
从 20 乘 20 扩大 到 120 乘 120。 动 画 开始 2 秒 之 后 ， 圆 形 的 半径 在 4 秒 的 时 间 里 从 20 扩大 
到 50。 图 12-3 展示 了 4 个 时 间 里 的 动画 组 合 截图 : 0 秒 ， 动 画 开 始 时 ，2 秒 ， 圆 形 开 始 扩 
大 时 ; 6 秒 ， 圆 形 完成 扩大 时 ，8 秒 ， 动 画 结束 时 。 


示例 12-3: 多 个 对 象 的 简单 动画 


htip://oreillymedia.github.io/sve-essentials-examples/ch12/multiple_animation2.html 












































<rect x="10" y="10" width="20" height="20" 
style="stroke: black; fill: #cfc;"> 
<animate attributeName="width" attributeType="XML" 
begin="0s"” dur="8s" from="20" to="120" fill="freeze"/> 
<animate attributeName="height" attributeType="XML" 
begin="0s" dur="8s" from="20" to="120" fill="freeze"/> 
</rect> 


<circle cx="70" cy="70" r="20" 
style="fill: #ccf; stroke: black;"> 
<animate attributeName="r" attributeType="XML" 
begin="2s" dur="4s" from="20" to="50" fill="freeze"/> 


</circle> 
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时 间 : 0 秒 时 间 : 2 秒 时 间 : 6 秒 








时 间 : 8 秒 





12-3， 多 重 对 象 动画 的 各 阶段 


12.2 ”动画 时 间 详 解 
SVG 动画 用 到 的 动画 时 钟 在 SVG 加 载 完成 时 开始 启动 计时 ， 当 用 户 离开 页 面 时 停止 计时 。 
我 们 可 以 以 下 列 任意 一 种 方式 指定 特定 动画 的 开始 和 持续 时 间 为 一 个 数值 。 


。 时 、 分 、 秒 形式 (1:29:23) 的 完整 时 间 值 。 

。 分 、 秒 形式 (62:15) 的 局 部 时 间 值 。 

。 以 h (时 )、min (分 )、s ( 秒 ) 或 者 ms (毫秒 ) 缩写 结尾 的 时 间 值 ， 比 如 dur="3.5s" 
begin="1imin"。 不 可 以 在 值 和 单位 之 间 插 入 任何 空白 。 


如 果 不 指定 单位 ， 默 认为 秒 。 


12.3 同步 动画 

我 们 可 以 绑 定 动画 的 开始 时 间 为 另 一 个 动画 的 开始 或 者 结束 ， 而 不 是 在 文档 加 载 时 定义 每 
个 动画 的 开始 时 间 。 示 例 12-4 中 有 两 个 圆 的 动画 ， 第 二 个 会 在 第 一 个 停止 缩放 时 开始 扩 
大 。 图 12-4 展示 了 该 动画 的 重要 阶段 。 


示例 12-4: 同步 动画 
<circle cx="60" cy="60" r="30" style="fill: #f9f; stroke: gray;"> 
<animate id="c1" attributeName="r" attributeType="XML" 
begin="0s" dur="4s" from="30" to="10" fill="freeze"/> 
</circle> 

















<circle cx="120" cy="60" r="10" style="fill: #9f9; stroke: gray;"> 
<animate attributeName="r" attributeType="XML" 
begin="c1.end" dur="4s" from="10" to="30" fill="freeze"/> 


</circle> 


时 间 : 0 秒 时 间 : 4 秒 | 时间: 8 秒 











12-4: 同步 动画 的 各 阶段 示意 图 








我 们 还 可 以 给 同步 添加 一 个 偏 移 量 。 要 让 一 个 动画 在 另 一 个 动画 开始 2 秒 后 再 开始 ， 我 
们 要 使 用 类 似 begin="otherAnim.end+2s" 的 形式 指定 (可 以 在 加 号 两 侧 添 加 空白 )。 示 例 
12-5 中 ， 第 二 个 圆 会 在 第 一 个 圆 开 始 收缩 1.25 秒 之 后 开始 增长 。 


示例 12-5: 带 有 偏 移 量 的 同步 动画 
http://oreillymedia.github.io/svg-essentials-examples/ch12/sync_with_offset.html 


























<circle cx="60" cy="60" r="30" style="fill: #f9f; stroke: gray;"> 
<animate id="c1" attributeName="r" attributeType="XML" 
begin="Qs" dur="4s" from="30" to="10" fill="freeze"/> 
</circle> 


<circle cx="120" cy="60" r="10" style="fill: #9f9; stroke: gray;"> 
<animate attributeName="r" attributeType="XML" 
begin="c1.begin+1.25s" dur="4s" from="10" to="30" fill="freeze"/> 
</circle> 


在 介绍 完 同步 动画 之 后 ， 我 们 终于 可 以 介绍 end 属性 了 。 它 可 以 给 动画 设置 一 个 结束 时 
间 ， 但 这 并 不 能 替代 dur 属性 ! 下 面 这 个 动画 会 在 页 面 载 入 6 秒 之 后 开始 。 它 会 持续 12 
秒 或 者 直到 名 为 otherAnin 的 动画 结束 ， 这 取决 于 是 动画 先 结束 还 是 12 秒 先 到 : 
































<animate attributeName="width" attributeType="XML" 
begin="6s" dur="12s" end="otherAnim.end" 
from="10" to="100" fill="freeze"/> 


当然 ， 我 们 也 可 以 设置 end 的 值 为 一 个 指定 的 时 间 ; 这 可 以 用 于 在 中 途 拦 截 动画 ， 这 样 我 
们 就 可 以 看 看 是 否 一 切 都 在 正确 的 位 置 。 这 也 是 我 们 创建 图 12-3 的 方式 。 下 面 这 个 动画 在 
5 秒 时 开始 ， 并 且 应 该 持续 10 秒 ， 但 是 会 在 文档 载 入 后 9 秒 (动画 开始 4 秒 后 ) 暂停 。 这 
个 动画 会 停止 在 40% 处 ， 因 此 宽度 会 冻结 在 140 (从 100 到 200 的 40% 的 距离 ) 。 








<animate attributeName="width" attributeType="XML" 
begin="5s" duyr="10s" end="9s" 
from="100" to="200" fill="freeze"/> 


12.4 重复 动作 


到 目前 为 止 ,动画 都 只 发 生 一 次 ，fill 被 设置 为 freeze 使 动画 保持 在 最 后 阶段 。 如 果 想 
要 对 象 返 回 到 动画 起 始 状 态 ， 忽 上 略 这 个 属性 即 可 (等 价 于 设置 fitl 为 默认 值 remove)。 





另外 两 个 属性 允许 我 们 重复 动画 。 第 一 个 是 repeatCount， 设 置 一 个 整 型 值 ， 告 诉 引擎 我 
们 想 要 将 指定 的 动画 重复 多 少 次 。 第 二 个 是 repeatDur， 设 置 一 个 值 ， 告 诉 引擎 重复 应 该 
持续 多 长 时 间 。 如 果 想 要 动画 重复 到 用 户 离开 页 面 ， 设 置 repeatCount 或 者 repeatDur 的 
值 为 indefinite 即 可 。 通 常 我 们 只 会 使 用 其 中 一 个 ， 而 不 是 两 个 都 使 用 。 如 果 同 时 指定 
repeatCount 和 repeatDur 两 个 属性 ， 则 哪个 属性 指定 的 时 间 先 到 达 就 使 用 哪个 属性 。 
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示例 12-6 中 的 动画 展示 了 两 个 圆 形 。 上 面 的 圆 从 左 侧 移 到 右 侧 ， 重 复 2 次 ， 每 次 5 秒 。 第 
二 个 圆 从 右 侧 移动 到 左 侧 ， 总 共 持 续 8 秒 。 

















示例 12-6: 重复 动画 示例 
htip://oreillymedia.github.io/svg-essentials-examples/ch12/repeated_action.html 
<circle cx="60" cy="60" r="30" style="fill: none; stroke: red;"> 
<animate attributeName="cx" attributeType="XML" 
begin="0s" dur="5s" repeatCount="2" 
from="60" to="260" fill="freeze"/> 
</circle> 


<circle cx="260" cy="90" r="30" style="fill: #ccf; stroke: black;"> 
<animate attributeName="cx" attributeType="XML" 
begin="0s" dur="5s" repeatDur="8s" 
from="260" to="60" fill="freeze"/> 
</circle> 
就 像 我 们 可 以 相对 于 另 一 个 动画 的 开始 或 者 结束 时 间 来 同步 动画 一 样 ， 我 们 也 可 以 将 某 个 
动画 的 开始 时 间 绑 定 到 另 一 个 重复 动画 的 第 指定 次 数 动画 开始 时 间 。 要 这 样 做 的 话 ， 需 要 
给 第 一 个 动画 一 个 id， 然后 设置 第 二 个 动画 的 begin 为 id.repeat(count)，count 是 第 一 
个 动画 的 重复 次 数 ， 以 0 开始。 示例 12-7 中 展示 了 上 面 的 圆 从 左 侧 移 到 右 侧 三 次 ， 每 次 
重复 需要 5 秒 。 下 面 的 正方 形 会 从 右 侧 移 到 左 侧 一 次 ， 但 是 直到 上 面 的 圆 重 复 第 二 次 之 后 
2.5 秒 时 才 开 始 。 


示例 12-7: 带 重 复 的 同步 动画 
http://oreillymedia.github.io/sve-essentials-examples/ch12/sync_repetition.html 



































<circle cx="60" cy="60" r="15" 
style="fill: none; stroke: red;"> 
<animate id="circleAnim" attributeName="cx" attributeType="XML" 
begin="0s" dur="5s" repeatCount="3" 
from="60" to="260" fill="freeze"/> 
</circle> 


<rect x="230" y="80" width="30" height="30" 
style="fill: #ccf; stroke: black;"> 
<animate attributeName="x" attributeType="XML" 
begin="circleAnim.repeat(1)+2.5s" dur="5s" 
from="230" to="30" fill="freeze"/> 
</rect> 


12.5 ”对 复杂 的 属性 应 用 动画 


动画 并 不 仅 限于 简单 的 数值 和 长 度 。 我 们 可 以 为 几乎 任何 属性 和 样式 应 用 动画 ， 使 这 些 属 
性 在 两 个 值 之 间 平 请 过 滤 。 


要 为 颜色 应 用 动画 ， 只 需要 给 from 和 to 属性 应 用 有 效 的 颜色 即 可 ， 颜 色 值 如 4.2.2 节 中 
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所 描述 。 颜 色 被 看 作 是 用 于 计算 的 三 个 数值 分 量 : R、G、8B 的 每 个 值 都 会 从 一 个 颜色 转换 
到 另 一 个 。 示例 12-8 为 圆 形 的 填充 和 笔画 颜色 应 用 了 动画 ， 填 充 色 从 淡 黄色 改变 为 红色 ， 
轮廓 从 灰色 改变 为 蓝 色 。 这 两 个 动画 都 是 在 页 面 载 入 2 秒 之 后 开始 ， 这 为 我 们 查看 原始 颜 
色 提 供 了 时 间 。 


示例 12-8: 颜色 动画 示例 


http://oreillymedia.github.io/sveg-essentials-examples/ch12/animate_color.html 
































<circle cx="60" cy="60" r="30" 
style="fill: #ff9; stroke: gray; stroke-width: 10;"> 
<animate attributeName="fiLLL" 
begin="2s" dur="4s" from="#ff9" to="red" fill="freeze"/> 
<animate attributeName="stroke" 
begin="2s" dur="4s" from="gray" to="blue" fill="freeze"/> 
</circle> 


我 们 还 可 以 为 值 为 数字 列表 的 属性 应 用 动画 ， 只 要 列表 中 数字 的 数量 没有 改变 即 可 ; 列 
表 中 的 每 个 值 都 是 单独 变换 的 。 这 意味 着 我 们 可 以 为 路 径 数据 或 者 多 边 形 的 点 应 用 动画 ， 
只 要 我 们 维持 点 的 数量 和 路 径 片段 的 类 型 即 可 ， 示 例 12-9 展示 了 一 个 <polygon> 和 一 个 
<path> 动画 。 








示例 12-9: 路 径 和 多 边 形 动画 示例 
http://oreillymedia.github.io/sve-essentials-examples/ch12/animate_path poly.html 


<polygon points="30 30 70 30 90 70 10 70" 
style="fill:#fcc; stroke:black"> 
<animate id="animation" 

attributeName="points" 

attributeType="XML" 

to="50 30 70 50 50 90 30 50" 

begin="Qs" dur="5s" fill="freeze" /> 
</polygon> 


<path d="M15 50 Q 40 15, 50 50, 65 32, 100 40" 
style="fill:none; stroke: black" transform="translate(0,50)"> 
<animate attributeName="d" 

attributeType="XML" 

to="M50 15 Q 15 40, 50 50, 32 65, 40 100" 

begin="0s" dur="5s" fill="freeze"/> 
</path> 


已 
12.6 ”指定 多 个 值 
目前 为 止 呈现 的 所 有 动画 元 素 都 提供 了 一 个 起 始 (fron 或 默认 ) 值 和 结束 (to) 值 ， 然 后 




















注 1: 正如 11.5 节 中 “定义 色彩 空间 ”部 分 所 表述 的 , 颜色 变化 受 color-interpolation 属性 的 影响 。 默 认 使 
用 sRGB 计算 插值 ， 通 常会 生成 合适 的 结果 。 


RS 
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让 计算 机 计算 如 何 从 起 始 值 到 结束 值 。 我 们 还 可 以 给 动画 提供 一 个 特定 的 中 间 值 ， 从 而 允 
许 用 一 个 独立 的 <animate> 元 素 定 义 复杂 的 变化 序列 。 我 们 可 以 提供 一 个 用 分 号 分 隔 的 、 
动画 在 持续 时 间 内 使 用 的 值 列表 ， 而 不 是 如 示例 12-8 中 那样 按照 从 淡 黄色 到 红色 的 方式 绘 
制 颜色 。 示 例 12-10 展示 了 一 个 使 用 淡 黄 色 、 淡 蓝 色 、 粉 红色 以 及 淡 绿色 值 动画 绘制 颜色 
的 圆 。 








示例 12-20: 使 用 特定 的 值 动画 绘制 颜色 


http://oreillymedia.github.io/svg-essentials-examples/ch12/animating_values.html 


<circle cx="50" cy="50" r="30" 
style="fill: #ff9; stroke:black;"> 
<animate attributeName="fill" 
begin="2s" dur="4s" values="#ff9;#99f;#f99;#9f9" 
fill="freeze"/> 
</circle> 








values 属性 也 可 以 用 来 实现 交替 来 回 的 重复 动画 ， 即 从 起 始 值 到 结束 值 再 回 到 起 始 值 ， 使 
用 values="start; end; start;" 形式 即 可 。 


12.7 多 级 动画 时 间 

当 一 个 动画 有 多 个 值 时 ， 动 画 的 持续 时 间 (dur 属性 ) 就 是 要 依次 通过 所 有 值 的 时 间 。 默 
认 情 况 下 ,动画 的 持续 时 间 被 划分 为 每 个 过 渡 周 期 等 长 的 片段 。 示 例 12-10 中 使 用 了 四 个 
值 ， 因 此 有 三 个 颜色 过 渡 ， 总 的 持续 时 间 为 4 秒 ， 因 此 每 个 过 渡 持 续 4/3 秒 。 














keyTimes 属性 允许 我 们 以 其 他 方式 划分 持续 时 间 。keyTimes 的 格式 也 是 一 个 分 号 分 隔 的 列 
表 ， 但 它 必须 有 和 values 相同 数目 的 条 目 。 第 一 个 条 目 始 终 为 0， 最 后 一 个 始终 为 1， 中 
间 时 间 使 用 0 到 1 之 间 的 小 数 表示 ， 代 表 动 画 的 持续 时 间 比 例 ， 当 动画 到 达 某 个 值 的 时 候 
刚好 对 应 相应 的 时 间 值 。 








对 时 间 的 更 多 控制 可 以 通过 calcMode 属性 完成 。calcMode 有 以 下 四 个 可 能 的 值 。 





。 paced 
SVG 阅读 器 会 计算 后 续 各 个 值 之 间 的 间隔 ， 并 以 此 为 依据 划分 持续 时 间 ， 因 此 其 变化 
的 速度 是 恒定 的 (keyTimes 属性 会 被 忽略 )。 适 用 于 颜色 、 简 单 的 数值 或 者 长 度 ， 但 不 
能 用 于 点 列表 或 者 路 径 数 据 。 





。 linear 
<animate> 元 素 的 默认 行为 ， 每 个 过 渡 内 的 速度 是 恒定 的 ， 但 是 分 配给 每 个 过 渡 的 时 长 
是 相等 的 (如 果 没 指定 keyTimes) 或 者 由 keyTimes 决定 。 





。 discrete 
动画 会 从 一 个 值 跳 到 另 一 个 值 ， 但 没有 过 渡 。 如 果 动 画 绘制 一 个 不 支持 过 渡 的 属性 〈 比 
如 font-family)， 会 自动 使 用 该 模式 。 





。 spline 
动画 会 按照 keysplines 属性 加 速 或 者 减速 ， 更 多 信息 可 以 阅读 SVG 规范 (http://www. 
w3.0rg/TR/SVG11/animate.html#KeySplinesAttribute ) 。 











12.8 ”<set> 元 素 


所 有 这 些 动画 归根 结 底 都 是 修改 值 。 有 时 候 ， 特 别 是 对 于 非 数 字 属 性 或 者 不 能 过 渡 的 属 
性 ， 我 们 可 能 想 要 在 动画 序列 的 某 个 点 上 改变 某 个 值 。 


比如 ， 我 们 可 能 想 要 一 个 初始 不 可 见 的 文本 项 ， 使 它 在 某 个 时 间 变 得 可 见 ， 这 里 并 不 需要 
from 和 to。 因此 ，SVG 引入 了 方便 速记 的 <set> 元 素 ， 它 只 需要 一 个 to 属性 以 及 适当 的 
时 间 信 息 。 示 例 12-11 将 一 个 圆 缩小 为 0， 然后 在 圆 消失 半 秒 之 后 显示 出 了 文本 。 

















示例 12-11: <set> 元 素 示 例 
http://oreillymedia.github.io/sve-essentials-examples/ch12/animation_set.html 
<circle cx="60" cy="60" r="30" style="fill: #ff9; stroke: gray;"> 
<animate id="c1" attributeName="r" attributeType="XML" 


begin="0s" dur="4s" from="30" to="0" fill="freeze"/> 
</circle> 


<text text-anchor="middle" x="60" y="60" style="visibility: hidden;"> 
<set attributeName="visibility" attributeType="CSS" 
to="visible" begin="4.5s" dur="1s" fill="freeze"/> 
ALL gone! 
</text> 


12.9 <animateTransform> 元 素 


<animate> 元 素 并 不 适用 于 旋转 、 平 移 、 缩 放 或 倾斜 变换 ， 因 为 它们 都 “被 包 衷 ”在 
transform 属性 内 。<animateTransform> 元 素 就 是 用 来 解决 这 个 问题 的 。 我 们 可 以 设置 
它 的 attributeName 为 transform。 然 后 用 type 属性 的 值 指 定 变换 的 哪个 值 应 该 变化 
(translate、scale、rotate、skewX 或 者 skewY 之 一 )。from 和 to 的 值 指 定 为 适当 的 要 
动画 绘制 的 变换 。 撰 写本 文 时 ， 大 多 数 实现 当前 都 只 支持 在 XML transform 属性 上 使 用 
<animateTransform> 而 不 支持 CSS3 变换 。 























示例 12-12 把 矩形 在 水 平方 向 上 由 正常 的 比例 拉 伸 了 四 倍 ， 垂 直方 向 上 拉 伸 了 两 倍 。 注 意 
和 矩形 是 围绕 原点 的 ， 因 此 它 在 缩放 时 并 不 会 移动 ， 而 它 在 一 个 <g> 元 素 内 ， 因 此 它 可 以 被 
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平移 到 更 适当 的 位 置 。 图 12-5 展示 了 动画 的 开始 和 结束 。 











示例 12-12: <animateTransform> 示例 
http://oreillymedia.github.io/sve-essentials-examples/ch12/animate_transform.html 


<g transform="translate(100,60)"> 
<rect x="-10" y="-10" width="20" height="20" 
style="fill: #ff9; stroke: black;"> 
<animateTransform attributeType="XML" 
attributeName="transform" type="scale" 
from="1" to="4 2" 
begin="0Qs" dur="4s" fill="freeze"/> 
</rect> 
</g> 





12-5: <animateTransform> 之 前 和 之 后 











如 果 打 算 为 多 个 变换 应 用 动画 ， 必 须 使 用 additive 属性 。additive 的 默认 值 为 replace， 
它 会 替换 动画 对 象 的 指定 变换 。 但 这 不 适用 于 一 系列 的 变换 ， 因 为 后 面 的 动画 设置 的 变换 
会 覆盖 前 面 的 。 通 过 设置 additive 为 sum，SVG 会 积累 变换 。 示 例 12-13 拉 伸 并 旋转 了 和 矩 
形 。 变 换 前 后 的 图 形 如 图 12-6 所 示 。 
































示例 12-13: 多 个 <animateTransform> 元 素 示 例 
htip://oreillymedia.github.io/svg-essentials-examples/ch12/additive_transform.html 


<rect x="-10" y="-10" width="20" height="20" 

style="fill: #ff9; stroke: black;"> 

<animateTransform attributeName="transform" attributeType="XML" 
type="scale" from="1" to="4 2" 
additive="sum" begin="Qs" dur="4s" fill="freeze"/> 

<animateTransform attributeName="transform" attributeType="XML" 
type="rotate" from="0" to="45" 
additive="sum" begin="0Qs" dur="4s" fill="freeze"/> 


</rect> 
加 


图 12-6; 多 个 <animateTransform> 之 前 和 之 后 


























我 们 也 可 以 用 additive="sum" 合并 控制 数值 和 颜色 属性 的 动画 元 素 的 效果 。 
如 果 动 画 使 用 to 指定 ， 则 把 它们 加 在 一 起 会 导致 后 续 动 画 使 用 上 一 个 动画 
的 当前 值 作为 它们 的 起 点 。 如 果 动 画 使 用 by 属性 定义 效果 ， 或 者 同时 使 用 
from 和 to， 那么 最 终 值 将 会 是 所 有 单个 变化 的 总 和 。 














12.10 ”<animateMotion> 元 素 


我 们 可 以 通过 在 <antmateTransform> 元 素 中 使 用 translate 让 对 象 沿 着 一 条 直线 路 径 运动 。 
然而 ， 如 果 想 要 对 象 按照 更 复杂 的 路 径 运动 ， 我 们 需要 一 系列 变换 动画 定时 一 个 接 一 个 地 
执行 。<animateMotion> 元 素 使 得 让 对 象 沿 着 任意 路 径 运动 变 得 很 容易 ， 无 论 是 直线 还 是 一 
系列 的 重 天 循环 路 径 。 





























如 果 想 要 对 直线 运动 使 用 <animateMotion>， 简 单 地 设置 fron 和 to 属性 ， 然 后 给 每 个 属 
性 分 配 一 对 (x, y) 坐标 即 可 。 这 个 坐标 用 于 指定 要 移动 形状 的 坐标 系统 中 (0,0) 点 的 位 置 ， 
类 似 于 translate(x，y) 的 工作 原理 。 示 例 12-14 展示 了 将 一 组 圆 和 和 矩形 从 (0,0) 移动 到 
(60,30) 的 例子 。 











示例 12-14: 线性 路 径 动画 
http://oreillymedia.github.io/sve-essentials-examples/ch12/linear_animateMotion.html 
<g> 
<rect x="0" y="0" width="30" height="30" style="fill: #ccc;"/> 
<circle cx="30" cy="30" r="15" style="fill: #cfc; stroke: green;" /> 
<animateMotion from="0,0" to="60,30" dur="4s" fill="freeze"/> 
</g> 
可 以 用 values 属性 指定 多 个 点 ， 但 是 运动 仍然 是 一 系列 的 直线 运动 。 如 果 想 要 跟随 更 复杂 
的 路 径 运 动 ， 要 使 用 path 属性 ， 它 的 值 与 <path> 元 素 的 d 属性 的 值 格式 相同 。 示 例 12-15 
改编 自 SVG 规范 ， 是 一 个 按照 三 次 贝 塞 尔 曲线 路 径 运 动 的 三 角形 。 




















示例 12-15: 沿 复杂 的 路 径 运 动 


http://oreillymedia.github.io/sve-essentials-examples/ch12/complex_animate_motion.html 


<!-- 要 移动 的 三 角形 路 径 --> 
<path d="M50,125 C 100,25 150,225, 200, 125" 
style="fill: none; stroke: blue;"/> 


<!-- 三 角形 会 治 着 运动 路 径 移 动 。 路 径 原点 与 三 角形 底 边 中 点 垂直 对 齐 - -> 
<path d="M-10,-3 L10,-3 LO,-25z" style="fill: yellow; stroke: red;"> 
<animateMotion 
path="M50,125 C 100,25 150,225, 200, 125" 
dur="6s" fill="freeze"/> 
</path> 


正如 我 们 在 图 12-7 中 看 到 的 ， 三 角形 在 整个 路 径 中 都 保持 垂直 方向 。 



































Ww 


时 间 : 0 秒 时 间 : 3 秒 时 间 : 6 秒 











12-7: 沿 着 复杂 路 径 的 <animateMotion> 

















如 果 和 希望 对 象 倾斜 以 使 其 * 轴 始 终 平 行 于 路 径 的 方向 ， 只 要 给 <animateMotion> 元 素 添加 
一 个 值 为 auto 的 rotate 属性 就 行 了 。 示 例 12-16 展示 了 这 个 SVG， 图 12-8 展示 了 动画 不 
同 阶段 的 截屏 。 

示例 12-16: 人 带 目 动 旋转 的 复杂 路 径 动 画 
http://oreillymedia.github.io/sve-essentials-examples/ch12/animate_motion_rotate.html 








<!-- 要 移动 的 三 角形 路 径 --> 
<path d="M50,125 C 100,25 150,225, 200, 125" 
style="fill: none; stroke: blue;"/> 








<!-- 三 角形 会 沿 着 运动 路 径 移 动 。 它 通过 在 原点 上 方 垂直 方向 上 与 三 角形 底 边 中 心 水 平 对 齐 的 
方式 定义 --> 
<path d="M-10,-3 L10,-3 L0,-25z”styLe="fiLLL: yellow; stroke: red;"> 
<animateMotion 
path="M50,125 C 100,25 150,225, 200, 125" 
rotate="auto" 
dur="6s" fill="freeze"/> 


</path> 
vV ~、/ < / ~、y 


时 间 : 0 秒 

















时 间 : 3 秒 时 间 : 6 秒 











12-8: 沿 着 带 自动 旋转 的 复杂 路 径 的 <animateMotion> 


简 而 言 之 ， 当 我 们 不 使 用 rotate 属性 时 ， 其 默认 值 为 0， 此 时 对 象 就 像 一 个 沿 着 路 径 浮 动 
的 热气 球 。 如 果 设 置 rotate 为 auto， 对 象 就 像 坐 过 山 车 一 样 ， 沿 着 路 行 向 上 或 向 下 倾斜。 















































我 们 也 可 以 设置 roate 为 一 个 数值 ， 这 会 使 对 象 在 动画 中 旋转 。 因 此 ， 如 果 和 希望 无 论 路 径 
是 什么 方向 ， 对 象 都 旋转 45 度 ， 就 使 用 rotate="45"。 


示例 12-16 使 用 蓝 色 绘制 了 路 径 ， 因 此 它 是 可 见 的 ， 然 后 在 <animateMotion> 元 素 中 复制 了 
该 路 径 。 要 想 避 免 复 制 ， 只 需 在 <animateMotion> 元 素 中 添加 一 个 <mpath> 元 素 。<mpath> 
将 会 包含 一 个 xLink:href 属性 引用 我 们 想 要 使 用 的 路 径 。 当 想 要 将 一 个 路 径 应 用 给 多 个 动 
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画 对 象 时 ， 这 也 可 以 派 上 用 场 。 示 例 12-17 使 用 <mpath> 重 写 了 前 面 的 例子 。 











示例 12-17: 使 用 <mpath> 定义 沿 着 复杂 路 径 运动 的 动画 
<path id="cubicCurve" d="M50,125 C 100,25 150,225, 200, 125" 
style="fill: none; stroke: blue;"/> 


<path d="M-10,-3 L10,-3 LO,-25z" style="fill: yellow; stroke: red;"> 
<animateMotion dur="6s" rotate="auto" fill="freeze"> 
<mpath xlink:href="#cubicCurve"/> 
</animateMotion> 
</path> 


A DD 一 一 已 c 全 
12.11 运动 指定 关键 点 和 时 间 
在 示例 12-16 中 ， 三 角形 是 勺 速 移动 的 。 勺 速 动画 是 <animateMotion> 的 默认 行为 (等 价 
于 calcMode="paced") ;后续 移 动 之 间 需 要 花费 的 时 间 与 它们 之 间 的 距离 成 正比 。? 
在 12.7 节 ， 我 们 介绍 了 keyTimes 属性 ， 它 可 以 用 来 控制 动画 在 不 同 值 之 间 过 渡 的 速度 。 
我 们 也 可 以 针对 运动 动画 使 用 keyTimes， 但 是 如 果 我 们 使 用 路 径 而 不 是 value 列表 定义 运 
动 ， 那 么 需要 针对 路 径 使 用 keyPoints 属性 指定 关键 点 (你 肯定 猿 到 了 )。 











和 keyTimes 一 样 ，keyPoints 是 一 个 分 号 分 隔 的 十 进 制 数值 列表 。 每 个 点 表示 对 象 应 该 按 
照 keyTimes 列表 中 相应 的 时 间 点 治 着 路 径 移动 多 远 。 正 如 keyTimes 的 范围 是 从 0 (动画 起 
始 ) 到 1 (动画 结束 )，keyPoints 的 范围 也 是 从 0 (路 径 的 开始 ) 到 1 (路 径 结束 )。 示 例 
12-18 中 的 三 角形 在 上 升 时 越 来 越 慢 。 








虽然 keyTimes 必须 按照 从 0 到 1 的 顺序 指定 ， 但 keyPoints 可 以 在 路 径 的 中 间 开 始 或 结 
束 ， 还 可 以 向 两 个 方向 运动 。 然 而 ，keyPoints 和 keyTimes 列表 必须 拥有 相同 数量 的 条 目 ， 
并 且 我 们 必须 设置 caLcMode="Linear"” (或 者 "spLitne" ， 但 这 不 在 本 书 讨论 范围 之 内 )。 





示例 12-18: 使 用 keyPoints 和 keyTimes 沿 着 路 径 做 变速 运动 
http://oreillymedia.github.io/sve-essentials-examples/ch12/key_ points.html 


<path d="M-10,-3 L10,-3 LO,-25z" style="fill: yellow; stroke: red;" > 
<animateMotion 
path="M50,125 C 100,25 150,225, 200, 125" 
rotate="auto" 
keyPoints="0;0.2;0.8;1" 
keyTimes="0;0.33;0.66;1" 
calcMode="linear" 
dur="6s" fill="freeze"/> 
</path> 


注 2: 对 于 速度 和 距离 规则 有 一 个 例外 : 如 果 我 们 的 路 径 含 有 任意 的 moveto 命令 ， 都 会 被 算 作 零 距 离 ， 意 味 
着 我 们 的 对 象 将 会 从 一 个 子路 径 的 结束 位 置 立 即 跳 转 到 下 一 个 子路 径 的 开始 位 置 。 
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12.12 ”使 用 CSS 处 理 SVG 动 画 

现代 浏览 器 允许 我 们 使 用 CSS 处 理 HTML 和 SVG 动画 。 这 需要 两 个 步骤 。 第 一 步 ， 选 中 
想 要 运动 的 元 素 ， 然 后 设置 将 动画 属性 作为 一 个 整体 进行 设置 。 第 二 步 ， 告 诉 浏览 器 改变 
选中 元 素 的 哪个 属性 以 及 在 动画 的 什么 阶段 ; 这 些 都 定义 在 @keyframes 说 明 符 中 。 
































考虑 下 面 这 个 任务 : 显示 一 个 绿色 的 星星 ， 使 其 逐渐 变 淡 为 白色 的 内 部 ， 同 时 让 边框 变 
粗 ， 这 个 效果 就 是 颜色 “流出 ”到 边框 。 下 面 是 绘制 该 星星 的 SVG: 














<svg width="200" height="200" viewBox="0 0 200 200"> 
<defs> 
<g id="starDef"> 
<path d="M 38.042 -12.361 9.405 -12.944 -0.000 -40.000 
-9.405 -12.944 -38.042 -12.361 -15.217 4.944 
-23.511 32.361 0.000 16.000 23.511 32.361 15.217 4.944 Z" /> 
</g> 
</defs> 
<use id="star" class="starStyle" xlink:href="#starDef" 
transform="translate(100, 100)" 
style="fill: #008000; stroke: #008000"/> 
</svg> 


12.12.1 动画 属性 
下 面 是 我 们 可 以 在 CSS 中 给 动画 元 素 设置 的 属性 。 


animation-name 就 是 @keyframes 说 明 符 的 名 称 。 

animation-duration 决定 动画 应 该 持续 多 和 久 ， 它 的 值 是 数字 后 面 紧 跟 一 个 12.2 节 中 所 描 
述 的 时 间 单 位 。 

animation-timing-function 告诉 浏览 器 如 何 计算 中 间 值 (比如 ,动画 应 该 缓 入 或 者 缓 出 ， 
还 是 按照 不 连续 的 步骤 运动 )。 

animation-iteration-count 告诉 浏览 器 重复 动画 多 少 次 ，iinfinite 表示 无 限 循环 。 
animation-direction 决定 动画 是 反 向 还 是 正 向 执行 ， 以 及 是 否 在 两 个 值 之 间 交 替 。 
animation-play-state 可 以 设置 为 running 或 者 paused。 

animation-delay 告诉 浏览 器 应 用 样式 之 后 等 待 多 久 才 开 始 动画 。 

animation-fill-mode 告诉 动画 不 再 执行 时 使 用 什么 属性 。 可 以 是 forwards (应 用 动画 结 
束 时 的 属性 值 )、backward (应 用 动画 开始 时 的 属性 值 ) 或 者 both。 

















编写 本 文 时 ， 如 果 要 在 基于 Webkit 的 浏览 器 中 使 用 这 些 属 性， 我们 必须 针 
对 它们 使 用 -webkit- 前 级 ， 例 如 ，-webkit-animation-name 或 者 -webkit- 


animation-duration, 











示例 12-19 展示 了 用 CSS 设置 星星 动画 。 它 会 重复 4 次 ， 每 次 动画 时 长 2 秒 。 


示例 12-19: 使 用 CSS 设置 动画 


.StarStyle { 
animation-name: starAnim; 
animation-duration: 2s; 
animation-iteration-count: 4; 
animation-direction: alternate; 
animation-timing-function: ease; 
animation-play-state: running; 


12.12.2 ”设置 动画 关键 帧 


我 们 可 以 通过 使 用 @keyframes 这 一 媒体 类 型 设置 动画 每 ns 后 面 紧 跟 一 
个 控制 动画 的 名 称 。 在 @keyframes 内 ， 我 们 要 列 出 keyframe 选择 器 ， 即 告诉 浏览 器 何 时 
改变 属性 的 百分比 。 对 于 每 个 选择 器 ， 我 们 要 列 出 动画 应 该 呈现 的 属性 和 值 。 示 例 12-20 
展示 了 星星 动画 的 关键 帧 。 对 于 基于 Webit 的 浏览 器 ， 请 使 用 @-webkit-keyframes。 图 
12-9 展示 了 动画 的 三 个 阶段 。 














示例 12-20 : CSS 关键 帧 规范 
http://oreillymedia.github.io/sveg-essentials-examples/ch12/sveg_css_anim].html 


@keyframes starAnim { 

60% { 
fill-opacity: 1.0; 
stroke-width: 0; 

} 

100% { 
fill-opacity: 0; 
stroke-width: 6; 


} 
} 


也 可 以 使 用 0% 和 100% 的 同义词 from 和 to。 


六 


图 12-9: 开始 、 中 间 和 结束 阶段 的 动画 
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12.12.3 CSS 中 的 动画 运动 

如 果 想 要 使 用 纯 CSS 处 理 动 画 运 动 ， 我 们 不 能 使 用 transform 属性 。 相 反 ， 必 须 使 用 CSS 
样式 平移 、 旋 转 和 缩放 SVG。 幸 运 的 是 ， 正 如 6.9 节 中 指出 的 ， 尽 管 CSS transform 属性 
的 值 和 SVG transform 属性 的 值 有 些 差异 ， 但 是 看 起 来 还 是 非常 像 的 。 如 果 想 要 将 SVG 
元 素平 移 到 (100,530)， 缩 放 1.5 倍 ， 然 后 旋转 90 度 ， 属 性 将 会 是 如 下 所 示 : 



































transform: transLate(100px，50px) scale(1.5) rotate(90deg); 


示例 12-21 展示 了 让 星星 向 上 移动 并 旋转 ， 然 后 降落 到 起 点 所 需要 的 关键 帧 。 由 于 100% 
关键 帧 没有 指定 translate， 星 星 会 回 到 它 的 原始 位 置 (指定 在 SVG 中 )。 这 也 是 除了 
20% 这 一 关键 帧 ，50% 和 80% 关键 帧 必须 指定 translate 的 原因 ， 有 了 它 ， 星 星 在 该 部 分 
动画 期 间 才 不 会 垂直 移动 。 














示例 12-21: 在 CSS 中 指定 变换 
@keyframes starAnim { 
0% { 
fill-opacity: 1.0; 
stroke-width: 0; 


} 


20% { 
transform: translate(100px, S50px) 


} 


50% { 
transform: transLate(100px，50px) rotate(180deg) 


} 


80% { 
transform: transLate(100px，50px) rotate(360deg) 
} 


100% { 
fill-opacity: 0.0; 
stroke-width: 6; 
} 
} 


在 线 示例 中 我 们 可 以 创建 自己 的 关键 帧 并 实验 timing 属性 : 








http:/oreillymedia.github.io/svg-essentials-examples/ch12/svg_css_anim2.html 


编写 本 文 时 ， 当 我 们 给 使 用 <use> 元 素 复制 的 SVG 图 形 应 用 CSS 动画 和 过 
渡 时 ， 浏 览 器 还 有 一 些 缺 陷 且 表现 不 一 致 。 
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到 目前 为 止 ， 作 为 SVG 文档 的 作者 ， 你 已 经 做 完了 关于 图 形 的 所 有 决定 ， 比 如 静态 图 像 
看 起 来 是 什么 样子 ， 如 果 有 动画 的 话 何 时 启动 和 停止 等 。 本 章 ， 我 们 将 了 解 到 如 何 将 部 分 
控制 权 移 交 给 正在 查看 图 像 的 人 。 


















































最 低级 的 交互 方式 是 声明 式 交 互 (declarative interactivity) ， 即 定义 一 些 动 画 或 者 样式 改 
动 ， 告 诉 浏 览 器 在 某 些 情况 下 启用 这 些 动画 或 者 样式 改动 ， 而 不 是 通过 脚本 去 控制 。SVG 
提供 了 有 限 的 内 置 交互 状态 。 


13.1 在 SVG 中 使 用 链接 


最 简单 的 交互 方式 是 由 <a> 元 素 实现 的 链接 。 将 图 形 包含 在 <a> 元 素 内 ， 这 个 图 形 就 具有 
链接 了 ;， 点击 图 形 后 ， 将 跳 转 至 xLtnk:href 属性 指定 的 URL。 你 可 以 链接 到 另 一 个 SVG 
文件 ， 或 者 在 条 件 允 许 的 情况 下 链接 到 一 个 网 页 。 在 示例 13-1 中 ， 点 击 “Cat” 时 将 链接 
到 一 个 画 有 一 只 猫 的 SVG 文件 ， 当 点 击 红 色 、 绿 色 和 蓝 色 图 形 时 会 链接 到 W3C 的 SVG 
规范 页 面 。 第 三 个 链接 中 的 所 有 图 形 分 别 链接 到 了 相同 的 目的 地 址 ， 而 不 是 整个 图 形 边框 
中 的 区 域 都 会 响应 。 当 我 们 测试 这 个 例子 ， 在 图 形 之 间 移 动 光标 时 ， 会 发 现 这 些 图 形 之 间 
的 区 域 不 能 响应 点 击 。 


示例 13-1: SVG 中 的 链接 
http://oreillymedia.github.io/svg-essentials-examples/ch13/sve link.svg 






































<a xlink:href="cat.svg"> 
<text x="100" y="30" style="font-size: 12pt;">Cat</text> 
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</a> 


<a xlink:href="http://www.w3.org/SVG/"> 
<circle cx="50" cy="70" r="20" style="fill: red;"/> 
<rect x="75" y="50" width="40" height="40" style="fill: green;"/> 
<path d="M120 90, 140 50, 160 90 Z" style="fill: blue;"/> 

</a> 


如 5.3.2 节 所 描述 的 ， 在 <use> 元 素 中 ，xtink:href 指定 一 个 资源 ， 它 会 成 为 图 形 的 一 部 
分 。 对 于 <a> 元 素 ，xtink:href 属性 指定 的 是 另 一 个 用 于 跳 转 的 资源 。 




















HTML 文档 中 的 链接 可 以 通过 颜色 和 下 划 线 效果 来 识别 。 图 13-1 展示 了 示例 13-1 的 结果 ， 
没有 任何 地 方 告诉 我 们 图 形 是 有 链接 的 ， 除 非 我 们 注意 到 光标 从 箭头 更 改 为 “ 手 形 "。 使 
用 键盘 操作 的 用 户 也 会 面临 同样 的 困难 : 某 些 浏览 器 会 在 被 聚焦 的 元 素 上 显示 轮廓 ， 但 另 
一 些 却 没有 。 我 们 可 以 使 用 CSS 伪 类 向 用 户 提 供 有 关 图 形 交 互 元 素 的 一 些 反 馈 。 和 CSS 
class 一 样 ， 伪 类 用 于 给 元 素 的 特定 实例 应 用 样式 ， 但 和 真正 的 class 不 同 的 是 ， 它 们 会 自 
动 生效 ， 而 不 需要 写 在 class 属性 中 。 























Cat 
@ 国 人 
图 13-1: SVG 超 链接 ， 示 例 13-1 的 结果 


当 鼠 标 指 针 在 元 素 上 方 时 ，:hover 伪 类 会 生效 ， 而 当 键 盘 操 作 聚 焦 到 革 个 元 素 上 
时 ，:focus 伪 类 会 生效 。 因 为 这 两 个 伪 类 都 指示 了 用 户 操作 的 可 能 性 ， 所 以 我 们 经 常 对 
eLement :hover 和 element:focus 应 用 相同 的 样式 。 














示例 13-2 使 用 了 和 示例 13-1 相同 的 图 形 ， 但 当 链 接 被 鼠标 指向 或 者 作为 键盘 焦点 时 ， 会 
有 反馈。 文本 将 变 成 粗 体 加 下 划 线 ， 并 且 图 形 会 有 淡 蓝 色 的 边框 。 





示例 13-2: 使 用 CSS 高 亮 SVG 链接 
http://oreillymedia.github.io/svg-essentials-examples/ch13/svg_css_link.svg 


<style type="text/css"><![CDATA[ 


a.words:hover, a.words:focus { 
text-decoration: underline; 
font-weight: bold; 
} 
a.shapes:hover, a.shapes:focus { 
stroke: #66f; 
stroke-width: 2; 


注 1: Apache Batik SVG 1.7 版 阅读 器 不 支持 CSS 伪 类 选择 器 。 
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outline: none; /* 覆盖 默认 的 聚焦 样式 */ 
} 
]]> 





</style> 


<a Class="words" xlink:href="cat.svg"> 
<text x="100" y="30" style="font-size: 12pt;">Cat</text> 
</a> 


<a class="shapes" xlink:href="http://www.w3.org/SVG/"> 
<circle cx="50" cy="70" r="20" style="fill: red;"/> 
<rect x="75" y="50" width="40" height="40" style="fill: green;"/> 
<path d="M120 90, 140 50, 160 90 Z" style="fill: blue;"/> 

</a> 


13.2 ”控制 CSS 动 画 


我 们 是 否 想 要 更 加 动态 的 用 户 反馈 ? CSS 动画 也 使 用 样式 属性 定义 ， 所 以 它们 也 可 以 由 伪 





类 控制 。 示 例 13-3 中 ， 当 用 鼠标 悬 停 在 图 形 上 时 ， 动 画 就 会 开始 。 








示例 13-3: 使 用 :hover 属性 关联 动画 


http://oreillymedia.github.io/sveg-essentials-examples/ch13/anim _css_link.svg 
<style type="text/css"><![CDATA[ 


a.animatedLink { 
animation-name: animKeys; 
animation-iteration-count: infinite; 
animation-duration: 0.5s; 
animation-direction: alternate; 
animation-play-state: paused; 


} 


a.animatedLink:hover { 
animation-play-state: running; 


} 


@keyframes animKeys { 
0% {fill-opacity: 1.0;} 
100% {fill-opacity: 0.5;} 
} 
]]> 


</style> 


<a class="animatedLink" xlink:href="http://www.w3.org/SVG/"> 
<circle cx="50" cy="70" r="20" style="fill: red;"/> 
<rect x="75" y="50" width="40" height="40" style="fill: green;"/> 
<path d="M120 90, 140 50, 160 90 Z" style="fill: blue;"/> 

</a> 
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从 设计 的 角度 看 ， 这 并 不 是 一 个 很 好 的 示例 : 如 果 动 画 正在 进行 时 ， 将 鼠标 移出 链接 区 
域 ， 动 画 仅仅 会 暂停 ， 而 不 会 恢复 到 完全 不 透明 。 如 果 你 对 CSS 动画 感 兴趣 ， 可 以 参考 最 
新 的 规范 草案 : http:/www.w3.org/TR/css3-animations/。 


13.3 ”用户 触 发 的 SMIL 动 画 


CSS 动画 的 局 限 在 于 只 能 用 于 有 限 的 变动 类 型 和 有 限 的 事件 响应 。 如 果 我 们 在 SVG 中 使 
用 SMIL 动画 元 素 ， 可 以 为 begin 和 end 属性 使 用 另 一 种 格式 的 值 ， 以 便 响 应 用 户 操作 。 


























这 种 可 以 啊 应 交互 式 动画 时 间 属性 的 格式 就 是 elementID.eventName。 通 过 ID 引用 的 元 素 
并 不 一 定 是 正在 进行 动画 的 元 素 。 








利用 SMIL 的 begin 和 end 属性 进行 交互 的 过 程 是 基于 事件 的 : 一 旦 动画 开始 ， 它 就 会 进行 
下 去 ， 直 到 完成 动画 或 者 动画 终止 事件 发 生 。 与 此 相反 ， 使 用 CSS 伪 类 的 交互 是 基于 状态 
的 : 样式 或 者 动画 只 在 状态 为 真 时 才 会 应 用 。 例 如 ，#myElement:hover 这 个 CSS 伪 类 选择 器 
描述 了 当 鼠 标 指针 悬 停 在 ID 为 myElement 的 元 素 上 时 的 状态 ， 当 需要 定义 在 这 个 状态 下 产生 
的 动画 了 时， 需要 设置 动画 属性 begin="myElement.mouseover" 和 end="myElement.mouseout"。? 


为 了 更 好 地 控制 动画 ， 我 们 可 以 选择 性 地 以 elementID.eventName + offset 的 形式 添加 时 
间 偏 移 。 指 定 这 个 偏 移 的 格式 和 指定 其 他 SMIL 动画 时 间 属 性 一 样 (参见 12.2 节 )， 比 如 
带 单位 的 1.5min,， 或 者 和 秒表 计时 一 样 ， 类 似 于 91:30。 你 甚至 可 以 指定 负 的 时 间 偶 移 ， 
但 因为 没有 什么 超 能 力 的 矢量 图 形 ， 所 以 动画 并 不 会 在 事件 发 生前 开始 。 但 当 事 件 发 生 的 
时 候 ， 动 画 会 跳 过 前 面 的 部 分 〈 即 在 事件 发 生 时 已 经 流逝 的 时 间 中 发 生 的 动画 ) ， 继 续 进 
行 剩 下 的 动画 。 






































示例 13-4 创建 了 一 个 不 规则 图 形 和 一 个 按钮 。 当 你 点 击 按钮 的 时 候 ， 不 规则 图 形 会 旋转 
360 度 。 点 击 前 和 点 击 后 的 截图 见 图 13-2。 
































Start Start 


13-2; 脚本 控制 的 动画 的 两 个 阶段 的 截图 


示例 13-4: 交互 式 动画 


htip://oreillymedia.github.io/sve-essentials-examples/ch13/smil_event_animation.svg 



































注 2: 如 果 你 熟悉 JavaScript 事件 处 理 的 话 ， 会 发 现 这 些 事件 名 称 和 DOM 事件 处 理 一 样 。 如 果 你 不 熟悉 
JavaScript 和 DOM 事件 ， 请 继续 阅读 。 



































<g id="button"> 0 
<rect x="10" y="10" width="40" height="20" rx="4" ry="4" 
style="fill: #ddd;"/> 
<text x="30" y="25" 
style="text-anchor: middle; font-size: 8pt">Start</text> 
</g> 


<g transform="translate(100, 60)"> 
<path d="M-25 -15, 0 -15, 25 15, -25 15 2" 
style="stroke: gray; fill: #699;"> 


<animateTransform id="trapezoid" attributeName="transform" 
type="rotate" from="0" to="360" 
begin="button.click" 
dur="6s" /> ©@ 
</path> 
</g> 





@ 开始 按钮 只 是 简单 地 使 用 了 圆 角 和 矩形 和 文本 。id 写 在 整个 组 上 。 
名 我 们 在 button 对 象 中 绑 定 了 click 事件 ， 点 击 时 动画 开始 ， 而 没有 使 用 以 秒 为 单位 的 
开始 时 间 来 控制 动画 。 





常情 况 下 应 该 先 设 计 SVG， 再 添加 脚本 。 这 种 方法 的 一 个 好 处 是 ， 在 添加 
交互 之 前 可 以 先 看 看 图 形 是 否 符合 要 求 。 




















13.4 ”使 用 脚本 控制 SVG 


前 面 我 们 使 用 的 是 声明 式 动画 ， 下 一 步 我 们 将 换 成 脚本 来 处 理 动 画 ， 这 也 是 一 大 步 改变 。 
你 可 以 使 用 ECMAScript 编程 来 与 SVG 图 形 进行 交互 。[ECMAScript 是 JavaScript 标准 化 
版 本 ， 由 ECMA 组 织 (European Computer Manufacturer s Association， 欧 洲 计算 机 制造 联 
合 会 ) 定义 。] 如 果 你 没有 接触 过 ECMA/JavaScript， 或 者 没有 接触 过 编程 ， 可 以 参考 附 
录 C。 


SVG 阅读 器 在 读 取 SVG 文档 的 标记 时 ， 会 创建 一 棵 节点 树 ， 也 就 是 内 存 中 的 一 些 对 象 ， 
它们 和 标记 的 结构 、 内 容 一 一 对 应 。 这 就 是 DOM (Document Object Model， 文 档 对 象 模 


型 ) ， 


在 你 处 





























你 可 以 通过 脚本 来 访问 。 





理 DOM 之 前 ， ee de 最 主要 的 方法 就 是 document. 








getELementById(idString)。 这 个 方法 接受 一 个 字符 串 类 型 的 参数 ， 代 表 SVG 元 素 的 


id, 


返回 DOM i 如 果 你 想 要 获取 文档 中 标记 名 (标记 名 指 <svg> 中 的 








svg，<rect> 中 的 rect 等 ) 为 某 个 名 字 的 所 有 元 素 ， 可 以 使 用 document 上 的 另 一 个 方法 
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getELementsByTagName(name)， 它 返回 一 个 节点 数组 。 


当 你 获取 到 元 素 的 节点 之 后 ， 就 可 以 : 











。 使 用 element.getAttribute(attributeName) 读 取 它 的 属性 ,以 字符 串 形 式 返 回 属 性 的 值 ; 

。 使 用 element.setAttribute(name，newValue) 改变 属性 值 ， 如 果 指 定名 称 的 属性 不 存在 ， 
则 会 创建 ， 

。 使 用 element.removeAttribute(name) 删除 属性 。 




















你 可 以 使 用 element.setAttribute("style"，newStyleValue) 来 修改 内 联 样 式 ， 但 这 样 会 覆 
盖 元 素 上 的 所 有 样式 。 为 了 防止 样式 被 覆盖 ， 你 可 以 使 用 element.style 属性 。 








。 element.style.getPropertyValue(propertyName) 获取 指定 样式 .。 

。 element.style.setproperty(propertyName，newValue，priority) 修改 属性 (priority 
通常 为 nuLL， 但 也 可 以 是 important ) 。 

。 elLement .styLe.removeProperty(propertyName) 删除 属性 。 




















如 果 你 真 的 希望 一 次 设置 所 有 的 样式 ， 也 可 以 直接 修改 element.style.cssText， 这 个 属性 
是 一 个 代表 所 有 样式 的 字符 串 ， 格 式 为 property-name: vaLue。” 

如 果 你 需要 获取 或 者 修改 节点 的 文本 内 容 ， 使 用 eLement .textContent 属性 。 读 取 该 属性 
时 ， 它 会 返回 节点 所 有 后 代 的 文本 拼接 后 的 字符 串 。 修 改 该 属性 时 ， 则 会 用 一 个 文本 块 禁 
换 所 有 的 后 代 节 点 。” 


示例 13-5 使 用 了 这 些 方 法 来 获取 SVG 元 素 的 属性 ， 以 文本 方式 显示 它们 ， 然 后 修改 某 个 
属性 。( 这 个 例子 还 没有 交互 ， 但 对 我 们 来 说 很 重要 ， 因 为 它 是 更 多 交互 的 基础 。) 




















示例 13-5: 使 用 DOM 获取 SVG 
http://oreillymedia.github.io/sveg-essentials-examples/ch13/basic_dom_example.svg 


<svg width="300" height="100" viewBox="0 0 300 100" 
xmlns="http://www.w3.o0rg/2000/svg" 
xmlns:xlink="http://www.w3.0org/1999/xlink"> 


<title>Accessing Content in SVG</title> 


<rect id="rectangle" x="10" y="20" width="30" height="40" 
style="stroke:gray; fill: #ff9; stroke-width:3"/> © 
<text id="output" x="10" y="80" style="font-size:9pt"></text> 


注 3: 大 部 分 浏览 器 允许 你 通过 element.style.propertyName 或 者 element.style["property-name"] 读 写 样 
式 属性 ， 但 这 并 不 属于 CSS 对 象 模型 标准 (http://www.w3.org/TR/cssom/)， 在 一 些 SVG 阅读 器 中 也 
不 支持 ,或 者 支持 的 情况 不 一 致 。 

注 4: 如 果 你 对 使 用 .innerHTML 属性 来 修改 组 合 文本 和 标记 所 有 子 元 素 很 熟悉 的 话 ， 请 注意 ， 该 属性 只 在 
HTMLELement 中 被 定义 ， 很 多 浏览 器 和 SVG 阅读 器 在 SVG 元 素 上 不 支持 该 方法 。 















































<script type="application/ecmascript"> 


// <![CD 


ATA[ @ 


var txt = document.getElementById("output"); © 
var 『r = document.getElementById("rectangle"); 
var msg = r.getAttribute("x")+","+ @ 


一 


.ge 


tAttribute("y") + " "+ 


.Style.getPropertyValue("stroke") + " "+ 
.StyLe.getPropertyVaLue("fLLL" ) ; 


r.setAttribute("height", "30"); © 


txt. te 

// ]]> 

</script 
</svg> 


xtContent= msg; @ 


> 


@ 为 了 更 容易 从 脚本 中 获取 元 素 ， 给 它 一 个 唯一 的 id。 

@ <![CDATA[ 用 于 保证 代码 中 的 < 和 > 不 被 解析 为 标记 。 

@ 从 文档 中 通过 id 选择 元 素 ， 并 将 结果 保存 在 变量 中 。 

@ getAttribute() 和 style.getPropertyValue() 的 结果 是 字符 串 ， 使 用 + 将 它们 连接 在 一 
起 构成 消息 字符 串 。 

日 修改 矩形 的 高 度 ， 让 它 变 成 正方 形 。 


@ 最 后 ， 设 置 <text> 元 素 的 内 容 来 显示 属性 和 属性 


13.4.1 


来 
































值 。 














示例 13-5 中 的 脚本 是 在 <rect> 和 <text> 元 素 之 后 引入 到 SVG 文件 中 的 ， 
这 样 可 以 保证 在 脚本 运行 之 前 ， 元 素 已 经 在 文档 中 存在 。 














事件 概览 


当 图 形 对 象 啊 应 事件 的 时 候 就 产生 了 交互 。 事 件 的 类 型 有 很 多 种 。 下 方 的 事 作 





I 








描述 有 很 多 


自 万 维 网 联盟 的 规范 (http://www.w3.org/TR/SVG/interact.html#SVGEvents)。 





用 户 接口 事件 
当 元 素 接受 焦点 和 失去 焦点 (比如 
focusout 事件 。 当 一 个 元 素 通 过 鼠标 点 击 或 者 键盘 操作 激活 时 ， 会 变 成 activate 元 素 。 


饼 标 事件 





选中 和 取消 选中 文本 ) 时 会 分 别 触发 focusIn 和 





当 使 用 指针 设备 (如 鼠标 ) 在 某 个 元 素 上 点 击 和 释放 时 会 分 别 触发 mousedown 和 








mouseup 事 们 


当 指 针 设 备 移动 进入 某 个 元 素 、 


mouseover 、 

















F。 女 


E43 





mousemove 和 mouseout 事 





果 这 两 个 事件 在 屏幕 上 的 位 置 相 同 ， 则 会 触发 click 事件 。 
在 元 素 内 移动 、 从 元 素 中 移 走时 ， 会 分 别 触 发 


件 。 
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DOM 变化 (mnutation) 事件 
当 DOM (被 其 他 脚本 改动 导致 ) 变化 时 ，SVG 阅读 器 会 触发 一 些 事件 。 
节点 被 添加 到 另 一 个 节点 作为 子 节 点 时 ， 会 触发 DOMNodeInserted 事件 ， 
发 生变 化 时 ， 会 触发 DOMAttrModified 事件 。 本 书 不 会 











文档 事件 

当 SVG 阅读 器 完 
触发 SVGLoad 事件 。 当 文档 被 从 窗口 中 移 除 时 ， 会 触发 SvcunLoad 事件 。 
载 时 被 突然 中 止 ， 
会 触发 SVGError 事 











件 。 


当 阅 读 器 文档 的 大 小 、 深 动 位 置 、 缩 放 比 例 发 生变 化 时 ,会 触 














比如 ， 当 一 个 
当 节 点 的 属性 


详细 描述 与 这 些 事 件 有 关 的 内 容 。 


全 解析 完 文档 ， 并 准备 好 做 进一步 操作 (比如 显示 到 设备 上 ) 时 ， 





当 页 面 正在 加 





会 触发 SVGAbort 事件 。 当 文档 不 能 正确 加 载 或 者 脚本 执行 有 错误 时 ， 


发 SVGResize、 








SVGScroll、SVGZoon 事件 。 
。 动画 事件 
动画 开始 、 结 束 和 重复 播放 时 会 触发 beginEvent、endEvent 和 repeatEvent 事件 。 
repeatEvent 在 第 一 次 播放 时 不 会 触发 。 
。 键盘 事件 
SVG 并 没有 原生 的 键盘 事件 ， 但 是 有 一 些 浏 览 器 可 能 支持 keydown 和 keyup 事件 ， 这 是 
不 标准 的 。 
13.4.2 ”监听 和 响应 事件 
要 让 一 个 对 象 响应 事件 ， 首 先 需要 让 对 象 监听 事件 。 我 们 通过 addEventListener() 函数 来 
监听 事件 ， 它 接受 两 个 参数 。 第 一 个 参数 是 表示 要 监听 的 事件 类 型 的 字符 串 。 第 一 个 参数 
是 处 理事 件 的 函数 。 第 三 个 参数 是 可 选 的 ， 用 来 表示 是 否 响 应 “事件 捕获 ”阶段 的 事件 。 
事件 捕获 是 指 阅 读 器 将 事件 从 根 元 素 传递 到 子 元 素 直 到 找到 指定 事件 目标 的 过 程 。 指 定 
false (通常 用 false， 也 是 默认 值 ) 表示 响应 “事件 冒 泡 ”阶段 的 事件 。 事 件 冒 泡 是 指 事 








件 从 触发 事件 的 子 元 素 一 直 传递 到 目标 元 素 ， 再 传递 到 根 元 素 的 过 程 。” 











事件 处 理 函 数 接受 一 个 参数 : 


一 个 包含 了 触发 函数 调用 的 事件 的 相关 信息 的 事件 对 象 。 事 


件 对 象 中 最 重要 的 属性 是 target 属性 ， 它 代表 事件 产生 的 元 素 。 还 有 一 些 重要 的 属性 ， 比 


如 clientX 和 clientY,， 给 出 了 事件 发 生 的 4 
个 Web 页 面 而 言 的 。 





E 标 是 相对 于 整 


EE 标 ， 这 个 4 





示例 13-6 监听 了 





圆 上 的 mouseover、mouseout 和 click 事件 。 鼠 标 移 入 移出 


个 很 简单 的 定义 ， 


Events/#event-flow ) 。 


参阅 DOM 事件 





详情 请 








注 5: 这 是 一 


个 SVG 文件 或 者 整 





标准 (http://www.w3.org/TR/DOM-Level-3- 





A 兰 . 
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圆 角 半径 的 增 和 减 ， 点 击 鼠 标 则 会 增 或 减 圆 的 轮廓 宽度。 








示例 13-6: 监听 鼠标 运动 


http://oreillymedia.github.io/sveg-essentials-examples/ch13/simple_event.svg 


<circle id="circle" cx="50" cy="50" r="20" 
style="fill: #ff9; stroke:black; stroke-width: 1"/> 


<script type="application/ecmascript"><![CDATA[ 


function grow(evt) { 
var obj = evt.target; 
obj.setAttribute("r", "30"); 


} 


function shrink(evt) { 
this.setAttribute("r", "20"); 


3 


function reStroke(evt) { 
var W = evt.target.styLe.getPropertyVaLue("stroke 


-width"); 


Ww = 4 - parseFLoat(w); /* toggle between 1 and 3 */ 
evt.target. style.setProperty("stroke-width", w, null); 


} 


var c = document.getElementById("circle"); 
c.addEventListener("mouseover", grow); 
c.addEventListener("mouseout", shrink); 
c.addEventListener("click", reStroke); 


Lp 


</script> 





第 一 个 事件 处 理 函 数 grow() 使 用 了 evt.target 来 获取 接收 





事件 的 元 素 ， 然 后 将 它 存 在 变 


量 中 。 第 二 个 事件 处 理 函 数 shrink() 使 用 了 关键 字 this 来 引用 跟 事 件 监听 国 数 绑 定 的 
元 素 〈 在 这 个 例子 中 ， 和 evt.target 相同 ， 但 并 不 总 是 这 样 )。 最 后 一 个 事件 处 理 函 数 


restroke() 也 使 用 了 evt.target， 但 没有 使 用 临时 变量 。 


我 们 也 可 以 使 用 < 来 代替 evt.target (因为 这 是 唯一 绑 定 事件 处 理 函数 的 元 素 )， 但 这 是 
一 种 非常 不 好 的 办 法 ， 因 为 你 经 常 需要 将 同一 个 事件 处 理 函 数 绑 定 到 不 同 的 元 素 上 ， 比 如 




















下 一 个 例子 。 


13.4.3 修改 多 个 对 象 的 属性 


有 时 候 你 会 希望 在 对 象 A 上 产生 的 事件 可 以 同时 影响 对 象 A 和 对 象 B 的 属性 。 示 例 13-7 








展示 的 可 能 是 世界 上 最 丑 的 电 商 网 站 了 。 在 图 13-3 中 展示 








了 一 件 T 恤 ， 当 用 户 点 击 选 择 


尺码 的 时 候 ，T 恤 的 尺寸 也 会 随 之 改变 。 当 前 选中 的 尺码 按钮 会 高 亮 成 淡 黄 色 背 景 。 
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图 13-3: 不 同 尺 寸 选 择 的 截图 


示例 13-7: 使 用 脚本 修改 多 个 对 象 
http://oreillymedia.github.io/sve-essentials-examples/ch13/shirtl.svg 


XML 代码 : 


<svg width="400" height="250" viewBox="0 © 400 250" 
xmlns="http://www.w3.o0rg/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" 
onload="init(evt)"> @ 


<defs> 
<style type="text/css" > <![CDATA[ 
/* style rules will go here */ 
]]></style> 
<script type="application/ecmascript"> <![CDATA[ 
/* script will go here */ 
]]></script> 


<path id="shirt-outline" 
d="M -6 -30 -32 -19 -25.5 -13 -22 -14 -22 30 23 30 
23. =14.26:3 =13..33 .=19 7 =30 
A6.56001 -6 -30"/>@ 
</defs> 


<g id="shirt" > 
<use xlink:href="#shirt-outline" x="0" y="0"/> 
</g> 


<g id="scale0" > 
<rect x="100" y="10" width="30" height="30" /> 
<text x="115" y="30">S</text> 

</g> 


<g id="scalel1" class="selected"> © 
<rect x="140" y="10" width="30" height="30" /> 
<text x="155" y="30">M</text> 

</g> 


<g id="scale2" > 
<rect x="180" y="10" width="30" height="30" /> 





<text x="195" y="30">L</text> 
</g> 
</svg> 


@ 当 文 档 加 载 完成 后 ， 会 触发 SVGLoad 事件 ，onload 函数 会 调用 初始 化 函数 ， 并 传 和 事件 
信息 。 很 多 脚本 都 会 这 样 处 理 ， 以 确保 所 有 的 变量 都 被 正确 地 初始 化 。 这 也 使 得 你 可 以 
将 <script> 标记 放 到 SVG 元 素 之 前 ， 以 方便 维护 。 使 用 oneventname 属性 的 形式 也 可 
以 监听 很 多 事件 ， 但 是 不 建议 这 样 做 (应 该 使 用 addEventListener()) ， 因 为 这 样 会 将 











脚本 函数 和 XML 结构 混合 起 来 。 不 过 文档 加 载 事 件 是 个 例外 。 





包工 恤 的 轮 廊 中心 是 (0,0)， 然 后 通过 变换 移 到 对 应 的 位 置 ， 所 以 它 的 缩放 中 心 点 就 是 


恤 中 心 。 
四 中 间 的 按钮 在 初始 化 时 被 选中 。 
样式 : 
svg { /* 默认 值 */ 
stroke: black; 


fill: white; 


g.selected rect { 
fill: #ffc; /* 淡 黄 色 */ 





} 
text { 
stroke: none; 
fill:black; 
text-anchor: middle; 
} 
selected class 被 用 来 标识 哪个 尺寸 是 被 选中 的 ， 样 式 为 痰 黄色 背景 。 
脚本 : 


var scaleChoice 
var scaleFactor 


=1; © 
s: | L325. 5, TTS]s 
function init(evt) { @ 
var obj; 
for (var i = 0; i < 3; i++) { 
obj = document.getElementById("scale" + i); 
obj.addEventListener("click", clickButton, false); 
} 
transformShirt(); 


} 


function clickButton(evt) { 
var choice = evt.target.parentNode; © 
var name = choice.getAttribute("id"); 
var old = document.getElementById("scale" + scaleChoice); 
old.removeAttribute("class"); @ 
choice.setAttribute("class", "selected"); 
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scaleChoice = parseInt(name[name.Length - 1]); © 
transformShirt(); 


} 


function transformShirt() { @ 
var factor = scaleFactor[scaleChoicel]; 
var obj = document.getElementById("shirt"); 
obj.setAttribute("transform", 
"translate(150, 150) " + 
"scale(" + factor + ")"); 
obj.setAttribute("stroke-width", 
1 / factor); 
} 


@ 这 段 脚 本 会 关 广 哪个 按钮 (S$、M、L) 被 选择 了 ， 然 后 根据 索引 从 scaleFactor 数组 中 
取 到 对 应 的 缩放 值 。 默 认 的 索引 为 1， 代表 中 号 (M)。 

@ init() 函数 会 获取 每 个 由 矩形 和 文本 组 成 的 <9>， 并 让 它们 监听 click 事件 。 然 后 在 事 
件 处 理 函 数 中 让 工 恤 显示 正确 的 大 小 。 

@ 点 击 事件 可 能 发 生 在 文本 上 ， 也 可 能 发 生 在 矩形 中 。 使 用 parentNode 可 以 保证 choice 
代表 的 是 <g> 对 象 。 

@ 将 之 前 尺寸 对 应 的 按钮 <g> 上 的 selected class 移 除 掉 ， 然 后 为 新 选择 的 <g> 添加 这 个 
class。 

@ 通过 按钮 <g> 的 id 的 后 半 段 提取 出 数字 ， 赋 值 给 scaleChoice。 这 是 个 全 局 变量 ， 稍 后 
可 以 被 transformShirt() 函数 获取 到 。 

@ 改变 T 恤 的 大 小 和 位 置 是 通过 设置 它 的 transforn 属性 完成 的 。 轮 廓 的 宽度 则 是 通过 取 
缩放 值 的 倒数 来 指定 ， 这 样 可 以 保证 当 工 恤 放 大 和 缩小 时 ， 轮 廓 在 视觉 上 是 一 样 宽 的 。 


13.4.4 拖 搜 对 象 


我 们 来 扩展 这 个 示例 ， 添 加 一 些 可 以 拖 动 的 滑 块 ， 来 设置 了 恤 的 颜色 。 如 图 13-4 所 示 。 









































图 13-4: 颜色 滑 块 截图 
你 可 以 在 线 上 示例 中 体验 这 些 请 块 ; 





http:/oreillymedia.github.io/svg-essentials-examples/ch13/drag_objects.SVg 


这 个 示例 的 脚本 需要 更 多 的 全 局 变量 。 首 先是 slideChoice， 用 于 标识 当前 被 拖 动 的 是 最 





一 个 谓 块 (969、1、2)。 它 的 初始 值 是 -1， 表 示 当 前 没有 滑 块 被 拖 动 。 
数组 变 
色 的 : 








var slideChoice = -1; 
var rgb = [100, 100, 100]; 





接 下 来 绘制 请 块 。 请 块 的 背景 和 上 面 指示 当前 值 的 线 都 是 在 白色 背景 上 














还 需要 使 用 一 个 rgb 


量 来 分 别 保存 红 、 绿 、 蓝 的 值 (百分比 )， 初 始 值 都 是 100， 因 为 了 恤 一 开始 是 白 


绘制 的 ， 然 后 将 它 














们 分 组 放 在 一 起 。id 属性 放 到 <Line> 元 素 上 ， 因 为 它 的 y 坐 标 会 变化 。 事 件 处 理 国 数 会 








被 绑 定 到 <g> 上 。 这 样 这 个 组 就 会 捕获 发 生 在 任何 子 元 素 上 的 鼠标 事 人 











F。( 这 也 是 我 们 要 





画 外 面 的 白色 框 的 原因 ， 当 鼠标 移出 背景 外 的 时 候 ， 仍 然 可 以 跟踪 到 它 的 位 置 。) 





<g id="sliderGroupO" transform="translate( 230, 10 )"> 
<rect x="-10" y="-5" width="40" height="110"/> 
<rect x="5" y="0" width="10" height="100" style="fill: red;"/> 
<line id="slideQ" class="slider" 
x1="0" y1="0" x2="20" y2="0" /> 
</g> 


<g id="sliderGroup1" transform="translate( 280, 10 )"> 
<rect x="-10" y="-5" width="40" height="110"/> 


<rect x="5" y="0" width="10" height="100" style="fill: green;"/> 


<line id="slide1" class="slider" 
x1="0" y1="0" x2="20" y2="0" /> 
</g> 


<g id="sliderGroup2" transform="translate( 330, 10 )"> 
<rect x="-10" y="-5" width="40" height="110"/> 
<rect x="5" y="0" width="10" height="100" style="fill: blue;"/> 
<line id="slide2" class="slider" 
x1="0" y1="0" x2="20" y2="0" /> 
</g> 


新 的 样式 规则 包含 了 滑 块 所 要 的 所 有 样式 ， 只 是 没有 指定 它 的 颜色 : 


Line.sLider { 
stroke: gray; 
stroke-width: 2; 


; 
init() 函数 分 别 为 三 个 渭 块 添加 了 三 个 事件 监 昕 : 


obj = document.getElementById("sliderGroup" + i); 
obj.addEventListener("mousedown", startColorDrag, false); 
obj.addEventListener("mousemove", doColorDrag, false); 
obj.addEventListener("mouseup", endColorDrag, false); 
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对 应 的 函数 如 下 : 


function startCoLorDrag(evt) { 种 


var SLiderId = evt.target.parentNode.getAttribute("id"); 


endColorDrag( evt ); 
slideChoice = parseInt(sliderId[sliderId.leng 
} 


function endCoLorDrag(evt) { @ 
slideChoice = -1; 


} 


function doColorDrag(evt) { © 


th - 


1]); 


var sliderId = evt.target.parentNode.getAttribute("id"); 
chosen = parseInt(sliderId[sliderId.length - 1]); 


if (slideChoice >= 0 && slideChoice == chosen) { @ 


var obj = evt.target; © 

var pos = evt.clientY - 10; 
if (pos < 0) { pos = 0; } 

if (pos > 100) { pos = 100; } 


obj = document.getElementById("slide" + slideChoice); @ 


obj.setAttribute("y1", pos); 
obj.setAttribute("y2", pos); 


rgb[slideChoice] = 100-pos; @ 
var colorStr = "rgb(" + rgb[0] + "%,"+ 日 


rgb[1] + "%," + rgb[2] + "%)"; 
obj = document.getElementById("shirt"); 


obj.style.setPproperty("fill", colorStr, null); 


} 
} 


@ 鼠标 按 下 的 时 候 会 调用 startCoLorDrag(evt)。 它 首先 停止 当前 正在 进行 的 拖 动 (如果 
有 的 话 ) ， 然 后 将 当前 请 块 设置 为 点 击 的 这 个 (9= 红色 ，1= 绿色 ，2= 蓝 色 )。 


@ 鼠标 按键 释放 的 时 候 会 调用 endColorDrag(evt)。 这 个 函数 也 可 能 被 其 他 函数 调用 。 它 
会 将 当前 请 块 素 引 设 为 -1， 表 示 当 前 没有 请 块 被 拖 动 。 这 个 国 数 不 需 要 处 理 evt 参数 。 





四 鼠标 移动 时 会 调用 doCoLtorDrag(evt)。 这 个 国 数 会 


知 被 拖 动 的 是 哪个 滑 块 ) 和 ctLienty 属性 (来 获知 





4 


、 





史 用 evt 参数 的 target 属性 (来 获 
前 鼠标 的 位 置 )。 


@ 检查 当前 是 否 有 清 块 在 滑动 ， 以 及 请 动 的 请 块 是 当前 清 块 。 
©@ 获取 指示 线 对 象 和 鼠标 位 置 (相对 颜色 块 顶部 换算 过 的 位 置 )， 将 位 置 值 转换 到 0~100 








的 范围 。 
@ 将 指示 线 移 到 新 的 鼠标 位 置 。 
@ 计算 该 滑 块 对 应 的 新 颜色 值 。 
@ 以 rgb() 的 形式 写 上 颜色 值 以 改变 工 恤 的 颜色 。 
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这 个 例子 中 只 有 一 个 小 地 方 需 要 特别 注意 : 文档 只 会 在 鼠标 指针 在 滑 块 内 时 响应 
onmouseup 事件 。 所 以 如 果 你 在 红色 的 请 块 上 按 下 鼠标 ， 然 后 拖 动 鼠 标 到 工作 上， 再 释放 
鼠标 ， 文 档 并 不 会 注意 到 这 个 释放 动作 。 当 你 把 鼠标 再 次 移 回 红色 请 块 时 ， 它 仍然 会 跟随 
鼠标 。 为 了 解决 这 个 问题 ， 我 们 添加 了 一 个 完全 和 覆盖 当前 可 视 区 域 的 透明 矩形， 然后 让 它 
来 响应 鼠标 释放 事件 。 当 它 响 应 mouseup 事件 时 ， 会 调用 stopColorDrag 方法 。 这 个 元 素 
是 第 一 个 元 素 ， 这 样 它 就 会 出 现在 图 形 的 最 底下 。 为 了 让 这 个 元 素 不 干扰 图 形 ， 我 们 为 它 
设置 style="fill: none;"。 也 许 你 会 说 :“ 等 等 ， 不 是 说 好 了 透明 元 素 不 响应 事件 的 吗 ?” 
通常 情况 下 的 确 如 些 ， 但 我 们 可 以 将 pointer-events 的 值 设 为 visible， 这 样 不 管 它 的 透 
明度 是 多 少 ， 只 要 没 被 隐藏 就 能 响应 事件 。” 






































<rect id="eventCatcher" x="0" y="0" width="400" height="300" 
style="fill: none;" pointer-events="visible" /> 


修改 init() 函数 中 的 事件 监听 部 分 : 


document .getELementById("eventCatcher'" ) . 
addEventListener("mouseup", endColorDrag, false); 


13.4.5 与 HTML 页 面 交 互 

在 第 2 章 中 ， 我 们 介绍 过 ， 在 HTML 文档 中 加 入 交互 式 的 SVG 有 两 种 办 法 。 如 果 只 有 少 
量 SVG， 可 以 直接 放 入 HTML 中 。 如 果 有 大 量 的 SVG 图 形 ， 可 以 通过 <object> 元 素 引 
用 。 下 面 的 示例 会 展示 如 何 将 前 面 的 例子 放 入 HTML 中 : 























<object id="externalShirt" data="shirt_interact.svg" 
type="image/svg+xml"> 
<p>Alas, your browser does not support SVG.</p> 
</object> 


值得 关注 的 是 用 于 指定 图 形 源 (本 例 中 是 一 个 URL， 即 一 个 相对 路 径 ) 的 data 属性 以 及 
type 属性 ，type 属性 的 值 为 image/svg+xml。HTML 开启 标记 和 结束 标记 之 间 的 文字 只 会 
在 图 形 无 法 加 载 时 才 显 示 出 来 。 现 在 可 以 添加 一 些 让 SVG 脚本 和 页 面 脚本 交互 的 代码 了 ， 
id 属性 会 在 交互 中 扮演 重要 角色 。 


我 们 在 Web 页 面 中 放置 一 个 表单 ， 让 用 户 输入 红色 、 绿 色 和 蓝 色 的 百分比 。 用 户 输入 的 值 
会 反映 到 滑 块 上 。 如 果 用 户 拖 动 了 滑 块 ， 那 么 表单 中 的 值 也 会 对 应 更 新 。 


下 面 是 HTML 文档 ， 其 中 引用 了 (还 不 存在 的 ) updatesVG() 函数 。 这 个 函数 会 接受 两 个 
参数 ， 分 别 是 对 应 的 请 块 索引 值 和 输入 框 中 的 值 : 









































注 6:; pointer-events 的 其 他 值 包括 只 响应 填充 区 域 (ftLL) 、 只 响应 轮廓 区 域 (stroke) 以 及 响应 填充 和 
轮廓 区 域 (painted)， 这 些 值 都 不 管 元 素 是 否 可 见 。 与 之 对 应 的 还 有 visibleFill、visiblestroke 和 
visiblePainted， 也 会 考虑 元 素 的 可 见 性 。 

















添加 交互 | 191 


<!DOCTYPE htmL> 
<htmL xmlns="http://www.w3.o0rg/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<title>SVG and HTML</title> 
<style type="text/css"> 
/* 让 表单 项 独占 一 行 */ 
label {display: block;} 
hi {font-size: 125%;} 
</style> 
<script type="text/javascript"> 
/* 这 里 放置 脚本 代码 */ 
</script> 
</head> 











<body> 
<h1>SVG and HTML</h1> 
<div style="text-align:center"> 
<object id="shirt" data="shirt_interact.svg" 
type="image/svg+xml"> 
<p>Alas, your browser cannot load this SVG file.</p> 
</object> 


<form id="rgbForm"> 
<LabeL>Red: <input id="fld0" type="text" size="5" value="100" 
onchange="updateSVG(0, this.valuye)" />% </label> 
<label>Green: <input id="fld1i" type="text" size="5" valuye="100" 
onchange="updateSVG(1, this.valuye)" />% </label> 
<LabeL>BLue: <input id="fld2" type="text" size="5" value="100" 
onchange="updateSVG(2, this.valuye)" />%</label> 
</form> 
</div> 
</body> 
</htmL> 








为 了 避免 演示 代码 过 于 复杂 ， 我 们 疫 大 注意 编码 风格 ， 并 且 将 脚本 直接 
放 入 了 HTML 中 。onchange="updateSVG(0，this.value)" 和 添加 一 个 
<input> 元 素 change 事件 监听 器 效果 一 样 。 当 输入 框 的 值 变 化 时 ， 执 行 
updateSVG(0, this.value), 




















updateHTMLField 函数 将 由 SVG 文档 的 脚本 来 调用 。 它 接受 两 个 参数 ， 一 个 是 输入 框 的 索 
引 ， 一 个 是 值 ， 值 会 显示 在 对 应 的 输入 框 中 : 


function updateSVG(which, amount) { 
amount = parseInt(amount); 
if (!isNaN(amount) && window.setShirtColor) { 
window.setShirtColor(which, amount); 
} 
} 


function updateHTMLField(which, percent) { 





} 


document.getElementById("fld" + which).value = percent; 


接 下 来 需要 修改 SVG 文档 。 现 在 有 两 种 方法 修改 工 恤 的 颜色 : 一 种 是 从 滑 块 中 取 值 ， 一 
种 是 从 表单 中 取 值 。 这 样 的 话 ， 我 们 首先 需要 将 设置 工作 颜色 的 代码 从 请 块 拖 动 的 代码 中 
分 离 出 来 。 修 改 后 的 docolorDrag(evt) 国 数 会 检测 当前 滑 块 并 计算 请 块 的 位 置 ， 但 有 具体 的 
修改 会 调用 一 个 新 方法 svgSetShirtCotLor : 

















function doColorDrag(evt) { 


} 


if (slideChoice >= 0) { 
var sliderId = evt.target.parentNode.getAttribute("id"); 
chosen = parseInt(sliderId[sliderId.length - 1]); 
if (slideChoice == chosen) { 
svgSetShirtColor(slideChoice, 100 - (evt.clientY - 10)); 
} 
} 


svgSetShirtColor 函数 会 处 理 之 前 doCcolorDprag 做 的 部 分 工作 ,但 有 两 点 不 同 : 一 是 它 会 
使 用 传 入 的 滑 块 索 引 作为 第 一 个 参数 ， 而 不 再 使 用 全 局 变量 slideChoice， 二 是 值 也 作为 
参数 传 入 。 类 似 这 样 的 代码 变化 是 在 将 一 些 临 时 的 演示 代码 转变 为 更 模块 化 的 代码 时 必须 


做 的 。 








function svgSetShirtColor(which, percent) { 


} 


@ 需要 检查 值 是 否 在 正确 的 范围 。 


var obj; 
var colorStr; 
Var NewText; 


if (percent < 0) { percent = 0; } @ 
if (percent > 100) { percent = 100; } 


obj = document.getElementById("slide" + which); @ 
obj.setAttribute("y1", 100 - percent); 
obj.setAttribute("y2", 100 - percent); 

rgb[which] = percent; 


colorStr = "rgb(" + rgb[0] + "%," + © 

rgb[1] + "%," + rgb[2] + "%)"; 
obj = document.getElementById("shirt"); 
obj.style.setProperty("fill", colorStr, null); 





名 滑 块 移动 到 了 新 位 置 。 
目 改变 工作 颜色 的 代码 和 之 前 一 样 。 


接 下 来 ,在 init 函数 中 使 用 parent 来 将 SVG 文档 的 svgSsetShirtCotLor 函数 赋值 给 HTML 
页 面 的 setShirtColor 变量 。 之 所 以 可 以 这 样 做 ， 是 因为 当 一 个 文档 被 岁入 到 另 一 个 文档 
中 时 ， 子 文档 的 全 局 变量 parent 会 指向 父 文档 的 window 对 象 。 因 为 setShirtCcolor 会 成 为 
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Web 页 面 中 window 的 属性 ， 所 以 页 面 可 以 访问 它 。 接 下 来 的 代码 完成 了 HTML 到 SVG 的 
通信 。 在 使 用 parent 变量 前 ， 先 测试 一 下 ， 以 确保 它 存在 〈 即 确认 SVG 确实 是 被 内 和 在 
另 一 个 文档 中 ) 。 


function init( evt ) { 
// 添加 事件 监听 
if (parent) { 
parent.setShirtColor = svgSetShirtColor; 





transformShirt(); 


} 


最 后 一 步 是 完成 SVG 到 HTML 的 通信 ， 以 便 用 户 使 用 请 块 调整 颜色 时 也 能 正常 工作 。 我 
们 在 用 户 拖 搜 结束 时 更 新 HTML 表单 ， 而 不 是 一 直 不 停 地 更 新 。 在 endCotorDrag 函数 中 
添加 下 面 加 粗 的 代码 。 如 果 滑 块 被 拖 动 了 ， 会 调用 父 页 面 中 的 updateHTMLfield 函数 (如 
末 存 在 的 话 )， 并 带 上 滑 块 的 索引 和 值 。 




















function endColorDrag( ) { 


if (slideChoice >= 0) { 
if (parent) 
parent.updateHTMLField(slideChoice, rgb[slideChoice]); 
} 


// 标记 当前 没有 正 被 拖 动 的 滑 块 
slideChoice = -1; 


} 














结果 如 图 13-5 所 示 。 为 了 市 省 屏幕 空间 ， 截 图 被 编辑 过 。 








SVG and HTIML 








Red: 40 % 
Green' 20 % 
Blue: 60 % 


























13-5: HTML 与 SVG 交互 的 截图 
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你 也 可 以 查看 线 上 示例 : 


http://oreillymedia.github.io/svg-essentials-examples/ch13/shirt_interact.html 


13.4.6 ”创建 新 元 素 





除了 可 以 修改 已 有 元 素 的 属性 外 ， 脚 本 也 可 以 创建 新 元 素 。 接 下 来 我 们 为 工 恤 这 个 例子 添 











加 一 些 飞镖 盘 状 的 





圆 环 。 结 果 如 图 13-6 所 示 ， 我 们 确信 这 会 是 一 件 超 级 流行 的 衣服 。 











从 
Red: 50 % 
Green: 75 % 
Belo0 % 
Rings: (3 








13-6: 不 同 选 项 下 的 截图 


你 可 以 在 在 线 示例 中 自己 设计 T 恤 : 





http://oreillymedia.github.io/svg-essentials-examples/ch13/shirt_create.html 


HTML 也 需要 做 一 些 修改 ， 添 加 一 个 新 表单 项 来 指定 圆 环 的 数量 : 


<LabeL>Rings : 





<input id="nRings" type="text" size="3" value="0" 


onchange="createRings(this.value)" /></label> 

















SVG 图 形 在 一 个 外 部 文档 中 ， 所 以 HTML 中 的 脚本 需要 找到 获取 SVG 图 形 的 方法 。 在 
上 一 节 中 ，SVG 文档 中 的 脚本 使 用 了 parent 来 访问 HTML 脚本 的 环境 。 在 这 个 示例 中 ， 
HTML 中 的 脚本 将 使 用 <object> 元 素 的 getSVGDocument() 方法 来 直接 获取 和 修改 SVG 
DOM。SVG 文档 和 上 一 节 完 全 一 样 。 








为 了 访问 到 SVG 文档 ， 当 页 面 加 载 完 成 时 在 Web 页 面 的 <body> 上 调用 一 个 初始 化 方法 : 


<body onload= 


























“nit() "Ss 


init() 国 数 会 获取 SVG 文档 并 将 它 存 在 一 个 全 局 变量 中 : 
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Var svgDoc; 


function init() { 
var obj = document.getElementById("shirt"); 
svgDoc = obj.getSVGDocument(); 

} 


至 此 ，HTML 页 面 脚本 中 的 createRings() 就 能 添加 和 移 除 SVG 文档 中 的 元 素 了 ， 见 示例 
13-8。 

















示例 13-8: 使 用 JavaScript 创建 元 素 


function createRings(nRings) { 
var shirt = svgDoc.getElementById("shirt"); © 
var rings = shirt.getElementsByTagName("circle"); 外 
Var i; 
var radius; 
var circle; 


for (i = rings.length - 1; i >= 0; i--){@® 
shirt.removeChild(rings[i]); 


} 


/* 限定 范围 为 0-5 */ 
if (nRings < 0) { nRings = 0; } 
else if (nRings > 5) { nRings = 5; } 














radius = nRings * 4; 
for (i = 0; i < nRings * 2; i++) { 
circle = svgDoc.createElementNS("http://www.w3.0rg/2000/svg", @ 
"circle"); 
circle.setAttribute("cx", "0"); 
circle.setAttribute("cy", "0"); 
circle.setAttribute("r", radius); 


if (i % 2 == 0) {© 
circle.style.cssText 


"fill:black; stroke:none"; 


} 
else { 
circle.style.cssText = "fill:white; stroke:none;"; 
} 
shirt.appendChild(circle); @ 
radius -= 2; 


} 
} 


@ 获取 SVG 文档 中 的 <g>。 

@ 获取 组 中 的 所 有 <circle> 元 素 。 

@ 通过 调用 shirt 变量 所 指向 的 父 元 素 <g> 的 removeChiLd(nodeToRemove) ，( 逆 序 ) 移 
所 有 的 圆 环 。 

@ 要 创建 的 元 素 属 于 SVG 文档 ， 所 以 必须 在 SVG 的 命名 空间 (NS) 中 创建 。 注 意 命名 空 
间 是 使 用 URL 定义 的 ， 而 不 是 前 绥 。 


滁 
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日 为 奇偶 位 置 的 圆 环 设置 不 同 的 样式 。 因 为 我 们 是 在 为 一 个 新 的 没有 样式 的 元 素 设置 多 个 


样式 ， 所 以 直接 使 用 element.style.cssText 设置 。 
@ 最 后 ， 使 用 shirt 分 组 的 addChiLd(newNode) 将 新 创建 的 <circle> 放 入 文档 中 并 减 小 


环 使 用 。SVG 文档 中 的 新 节点 会 按照 它们 被 添加 的 顺序 排序 ， 即 从 








角 半 径 以 便 下 个 圆 





大 到 小 。 这 样 小 圆 环 会 出 现在 大 圆 环 上 方 。 





~ 天 
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使 用 SVG DOM 





在 第 13 章 的 脚本 中 ， 我 们 已 经 使 用 过 一 些 属 性 和 方法 ， 比 如 创建 、 选 择 元 素 ， 获 取 、 设 
置 属性 和 样式 等 ， 这 些 都 是 DOM 标准 的 一 部 分 ， 并 不 是 SVG 独 有 的 。SVG1.1 规范 为 
SVG 定义 了 很 多 额外 的 方法 ， 使 得 操作 二 维 图 形 更 容易 。 利 用 这 些 方法 很 容易 精确 指定 文 
本 或 路 径 元 素 的 位 置 ， 控 制 动 画 时 间 ， 以 及 在 不 同 坐标 系统 之 间 自 由 转换 。 


14.1 确定 元 素 的 属性 值 


在 13.4 节 中 ,我们 使 用 getAttribute 和 setAttribute 来 访问 元 素 属 性 。 这 些 方法 将 属性 
值 都 当成 字符 串 来 处 理 ， 并 不 关注 它们 代表 的 含义 。 如 果 一 个 元 素 的 宽度 为 width="1oem"， 
另 一 个 元 素 的 宽度 为 width="190px"， 比 较 它 们 的 宽度 时 ， 就 需要 将 数值 从 字符 串 中 提取 
出 来 ， 然 后 找到 当前 字体 大 小 ， 进 行 单 位 转换 ， 再 进行 比较 。 


为 了 让 这 类 事情 更 简单 一 点 ，SVG 元 素 对 象 在 对 应 类 型 的 元 素 上 有 一 些 代表 关键 特性 的 
属性 。 比 如 SVGCircleElement 对 象 ( 即 SVG 代码 中 的 <circle>) 有 cx、cy、r 等 属性 ， 
SVGRectELement (<rect> 标记 ) 有 x、y、width、height 等 属性 。 






































这 些 属性 并 不 只 是 简单 地 存储 数字 。 在 大 部 分 情况 下 ， 每 个 属性 都 含有 两 个 子 属性 : 
baseVal 和 animVal。 其 中 animVal 对 象 是 只 读 的 ， 当 对 象 产生 动画 之 后 会 更 新 ， 所 以 它 始 
终 代表 属性 值 的 当前 显示 状态 。 





除 此 之 外 ，baseVal 和 animVal 子 属 性 是 包含 自身 数据 的 复杂 对 象 ， 使 得 在 处 理 以 不 同 单 
位 指定 的 属性 值 时 更 容易 。 对 长 度 和 角度 来 说 ，baseVal.value 和 animVal.value 属性 始 
终 存 储 以 用 户 单位 保存 的 值 (角度 单位 为 度 )， 而 不 管 在 设 定 属性 时 使 用 的 是 什么 单位 。 
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baseVal 和 animVal 对 象 还 包含 不 同 单位 之 间 进 行 转换 的 方法 。 





示例 14-1 展示 了 使 用 不 同 的 方法 获取 一 个 有 动画 的 椭圆 的 x 半径 和 y 半径 。 输 出 见 
(具体 的 输出 值 受 系统 的 默认 字体 大 小 影响 )。 


示例 14-1: 使 用 baseVal 和 animVal 属性 
http://oreillymedia.github.io/sve-essentials-examples/ch14/baseval_animval.svg 


动画 标记 : 


<ellipse id="el" cx="50%" cy="20" rx="40%" ry="1lem"> 


<animate id="animation" attributeName="rx" to="20%" 
begin="indefinite" dur="2s" fill="freeze"/> 


</ellipse> 


文本 输出 标记 : 


<text y="3em"> 


<tspan Xx="1lem" dy="1.5em">getAttribute("rx"):</tspan> 
<tspan x="50%" id="getRx"/> 

<tspan Xx="1lem" dy="1.5em">getAttribute("ry"):</tspan> 
<tspan x="50%" id="getRy"/> 

<tspan x="1lem" dy="1.5em">rx.baseVal.value:</tspan> 
<tspan x="50%" id="rxBase"/> 

<tspan xXx="1lem" dy="1.5em">ry.baseVal.value:</tspan> 
<tspan x="50%" id="ryBase"/> 

<tspan x="1em" dy="1.5em">rx.baseVal.valueAsString:</tspan> 
<tspan xXx="50%" id="rxBaseString"/> 

<tspan xXx="1lem" dy="1.5em">ry.baseVal.valueInSpecifiedUnits:</tspan> 
<tspan x="50%" id="ryBaseUnits"/> 


<tspan style="font-weight:bold;" x="1em" dy="2.5em">After 
rx.baseVal.convertToSpecifiedUnits():</tspan> 

<tspan xXx="1lem" dy="1.5em">rx.baseVal.valueAsString:</tspan> 
<tspan xXx="50%" id="rxBaseUnits"/> 


<tspan style="font-weight:bold;" x="1em" dy="2.5em">After 
approx. 1 second of animation:</tspan> 

<tspan x="1lem" dy="1.5em">rx.animVal.value:</tspan> 
<tspan x="50%" id="rxAnim"/> 

<tspan xXx="1lem" dy="1.5em">ry.animVal.value:</tspan> 
<tspan x="50%" id="ryAnim"/> 


</text> 


脚本 : 


Var 
Var 


doc . 
doc:; 
doc. 
doc. 


doc = document; 

el = doc.getElementById("el"); @ 
getElementById("getRx").textContent = el.getAttribute("rx"); 所 
getElementById("getRy").textContent = el.getAttribute("ry"); 
getELementById("rxBase" ) .textContent = el.rx.baseVal.value; © 
getELementById("ryBase" ) .textContent = el.ry.baseVal.value; 





图 14-1 
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doc.getElementById("rxBaseString").textContent = 
el.rx.baseVal.valueAsString; @ 
doc.getElementById("ryBaseUnits").textContent = 
el.ry.baseVal.valueInSpecifiedUnits; © 


el.rx.baseVal.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_EMS); @ 
doc.getElementById("rxBaseUnits").textContent = 
el.rx.baseVal.valueAsString; 


var animate = doc.getElementById("animation"); @ 


try { 
animate.beginELement(); // 动 画 开始 


} catch(e){/* 如 果 不 支持 动画 ,捕获 异常 */} 
setTimeout(getAnimatedVaLue，1000); © 


function getAnimatedValue() { © 


try { 
animate.endElement(); // 动 画 暂 停 


} catch(e){} 
doc.getElementById("rxAnim").textContent = el.rx.animVal.value; 
doc.getElementById("ryAnim").textContent = el.ry.animVal.value; 


} 


@ el 是 指 SVGELLipseELement 对 象 ， 也 就 是 椭圆 标记 。 

@@ el.getAttribute("rx") 返回 带 单位 的 属性 值 ， 也 就 是 标记 中 写 的 值 。 

@@ el.rx.baseVal.value 是 rx 被 转换 为 用 户 单位 之 后 的 值 。 

@ el.rx.baseVal.valueAsString 是 完整 的 字符 串 ， 包 含 单位 。 

加 el.ry.baseVal.valueInSpecifiedUnits 是 数值 类 型 的 属性 值 ， 但 是 单位 是 设 定 属 性 时 
使 用 的 单位 。 

@ convertToSpecifiedUnits(unitConstant) 方法 可 以 用 来 转换 单位 (本 例 中 转换 
为 了 em)。 该 方法 并 不 直接 返回 任何 值 ， 而 是 会 改变 对 象 中 的 vaLueAsString 和 
valueInSpecifiedUnits 属性 值 。vatLue a 户 单 位 ， 不 受 影响 。 

@ 该 标记 定义 了 一 个 动画 元 素 ， 它 会 改变 椭圆 的 rx 属性 。 属 性 begin="indefinite" 
阻止 了 动画 自动 开始 ， 而 是 通过 调用 beginElement() 方 法 开始 动画 。 在 调用 时 我 
们 将 它 放 在 一 个 try/catch 块 中 ， 以 防止 在 不 支持 动画 的 浏览 器 中 出 错 。 

@ setTimeout() 函数 调用 告诉 浏览 器 先 等 待 1 秒 (1000 毫秒 ) ， 然 后 再 执行 getAnimatedValue 
国 数 。 

@ getAnimatedValue() 通过 animate.endELement() 来 结束 动画 ， 然 后 查询 各 个 属性 的 
animVal 属性 。 尽 管 ry 并 没有 产生 动画 ， 但 ry.animVal 仍然 存在 ， 它 的 值 和 ry.baseVal 
一 样 。 




































































getAttribute( rpx): 
getAttribute("ry"): 


rx.baseVval.val 
ry.baseValval 
rx.baseVal.val 
ry.baseValval 


40% 

lem 
ue; 200 
Ue; 16 
UeAsString: 40% 
uelnSpecifiedUnits: 1 


After rx.baseVal.convertToSpecifiedUnits(): 


mx.baseValval 


UeAsString: 


After approx. 1 second of animation: 


rx.animVal.val 


Ue; 153.25 





ry.animVal.va 


Ue， 16 


12.5em 





14-1: 使 用 baseVal 和 animVal 取 值 的 动画 





示例 14-1 中 使 月 


有 的 rx、ry 属性 都 是 SVGAnimatedLength 对 象 的 实例 。SVG 定义 了 一 些 自 
定义 对 象 来 表示 不 同 的 几何 数据 。 表 14-1 列 出 了 一 些 最 重要 的 对 象 以 及 可 进行 的 操作 。 





表 14-1: SVG 数 据 对 象 



































































































































对 象 名 称 描述 属性 和 方法 
SVGLength 带 单 位 的 长 度 。 使 用 svGLength.sv6 属性: 
LENGTHTYPE_unit 定 义 ， 其 中 unit 是 unitType 允许 的 单位 之 一 
NUMBER (用 户 单位 )、PERCENTAGE、EMS value 长度 (用 户 单位 ) 
(em 单位 )、EXS (ex 单位 )、PX、CM、MM、 valueInSpecifiedUnits 
IN、PT、PC 之 一 长 度 (unitType 单位 ) 
valueAsstring 数值 和 单位 一 起 的 字符 串 
方法 : 
newValueSpecifiedUnits(unitType, 
valueInSpecifiedunits) 设置 值 和 单位 
convertToSpecifiedUynits(unitType) 改 
变 单位 ， 并 保持 值 与 用 户 单位 下 相同 
SVGAngle 带 单 位 的 角度 。 使 用 SVGAngle.sSVG_ 与 SVGLength 一样 
ANGLETYPE_unit 定 义 ， 其 中 unit 是 
UNSPECIFIED ( 默认 为 角度 )、DEG、RAD、 
GRAD 之 一 
SVGRect 使 用 用 户 单位 的 矩形 区 域 。SVGRect 对 属性 : 
象 与 <rect> 元 素 (使 用 SVGRectELement x、y、width、height 所 有 数字 都 是 用 户 
接口 ) 不 是 一 回 事 坐标 
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对 象 名 称 


SVGPoint 


描述 
在 用 户 空 间 中 的 一 个 点 








S 





属性 和 方法 

属性 : 

x、y 数字 (用 户 坐 标 ) 

方法 : 

matrixTransform(matrix) 返回 通过 算 阵 
变换 之 后 的 点 的 值 ， 参 数 一 个 矩阵 ， 为 
SVGMatrix 对 象 




















SVGMatrix 











用 于 变换 的 矩阵， 见 附录 D 





属性 : 

a、b、c、d、e、f 数字 ， 以 从 上 到 下 、 
从 左 到 右 的 顺序 代表 和 矩阵 中 的 数字 
方法 : 
multiply(secondMatrix) 返回 两 个 矩阵 相 
乘 的 结果 
inverse() 如 果 可 能 的 话 ， 转 置 矩 阵 ， 如 
果 不 能 转 置 (如 scate(9) 操作 )， 则 会 
抛 出 异常 


translate(x, y)、 scale(scaleFactor). 











scaleNonUniform(scaleFactorX, 
rotate(angLe)、 
y)、flipx()、 
flipY()、skewX(angle)、skewY(angle) 返 
回 经 过 指定 变换 〈 和 矩阵 相 乘 ) 之 后 的 拢 
阵 ;， rotateFromVector 会 计算 x 轴 与 向 
量 对 齐 时 需要 旋转 的 角度 ， fipX 和 flipY 
等 价 于 在 缩放 时 为 scale 设置 x/y 值 为 -1 


scaleFactoryY).、 


rotateFromVector(x, 


























SVGTransform 


恋 换 命令 。 使 用 SVG_TRANSFORM_type 定 
义 ， 其 中 type 是 MATRIX、TRANSLATE、 
SCALE、ROTATE、SKEWX、SKEWY 之 一 





属性 : 

type 前 述 类 型 之 一 

matrix SVGMatrix 对 象 ， 代 表 本 次 变换 
旋转 或 斜 切 时 的 角度 ， 否 则 为 

















angle 使 
0 

方法 : 
setMatrix(matrix)、setTranslate(x, 
ys 
scaleFactorY)、setRotate(angle, 
cy)、setSkewX(angle)、setSkewY(angle) 
通过 指定 变换 改变 SVGTransfornm 对 象 


setScaLe(scaLeFactorx， 


ExX5 





SVGTransformList 


变换 (SVGTransform 对 象 ) 列表 ， 顺 序 
与 指定 transform 属性 时 相同 。 除 了 用 
于 变换 的 方法 外 ， 这 些 对 象 还 实现 了 
numberofItems 属性 以 及 下 面 通 用 列表 中 
描述 的 方法 






































方法 : 
createSVaTransformFromMatrix(matrix) 
从 svGMatrix 创建 一 个 新 SVGTransform 
对 象 consolidate() 将 列表 中 所 有 
的 变换 合并 为 一 个 变换 矩阵 ， 返 
SVGTransform 对 象 











互 

















对 象 名 称 描述 属性 和 方法 
SVGXxxList 任何 可 能 被 当成 列表 或 数组 (以 及 大 部 属性 : 





分 能 使 用 动画 ) 的 数据 类 型 ， 都 有 对 应 numberofItems 列表 长 度 。 

的 SVGDatatypeList。SVG DOM 的 大 部 方法 : 

分 JavaScript 实现 使 用 数组 来 代表 这 些 列 clear() 移 除 列表 中 的 所 有 条 目 

表 ， 所 以 才 可 以 使 用 数组 的 形式 来 设置 initialize(newItem) 清除 列表 中 已 有 的 

或 获取 条 目 所 有 条 目 ， 放 入 新 条 目 
getItem(index) 获取 列表 中 指定 索引 位 
置 的 条 目 (第 一 个 索引 为 0) 


insertItemBefore(newItem， index)、 


> 








repLaceItem(CnewItem， index)、 
removeItem(index)、appendItem(newItem) 


顾名思义 的 一 些 修改 列表 的 方法 


SVGAnimatedXxx 几乎 每 种 数据 类 型 都 有 SVGAnimatedDatatype 属性 : 
接口 ， 用 于 能 使 用 动画 的 属性 值 。 比 如 baseval 包含 属性 值 的 对 象 
SVGCircleElement 对 象 的 cx 属性 是 一 个 animVal 只 读 对 象 ， 表 示 属 性 在 动画 过 程 
SVGAnimatedLength 对 象 ， 而 transform 属 中 的 当前 展示 值 
性 则 是 SVGAnimatedTransformList 类 型 



































14.2 SVG 接口 方法 


在 使 用 脚本 操作 SVG 时 ， 有 时 候 希 望 能 计算 一 些 未 并 在 属性 中 直接 定义 的 几何 属性 。 比 
如 你 可 能 希望 不 管 文本 使 用 的 什么 字体 ， 都 在 文本 周围 画 一 个 刚好 能 匹配 的 矩形 。 或 者 希 
望 知 道 脚 本 运行 时 某 个 动画 进行 到 哪里 了 。 或 者 希望 维护 一 个 复杂 属性 ， 比 如 路 径 中 的 曲 
线 部 分 或 变换 (transform) 属性 。 

















使 用 document.getELementById(id) 会 返回 一 个 对 象 ， 这 个 对 象 有 很 多 有 用 的 属性 和 方法 可 
以 进行 计算 和 维护 。 规 范 中 以 接口 的 概念 定义 了 这 些 属性 和 方法 ， 不 同类 型 的 对 象 的 属性 
和 方法 也 各 不 相同 。 











表 14-2 列 出 了 本 书 中 描述 的 一 些 元 素 对 应 的 接口 的 部 分 特性 。 这 个 列表 并 不 全 面 ， 但 应 该 
足够 入 门 使 用 了 。 


表 14-2: SVG 元 素 的 接口 



































应 用 元 素 方法 或 属性 结果 

SVGELement .OwnerSVGELement() 返回 最 近 的 祖先 <svg> 元 素 ， 如 果 是 在 顶级 

(SVG 命名 空间 中 的 任 SVG 元 素 调用 ， 则 返回 null 

何 元 素 ) .ViewportELement() 返回 建立 当前 元 素 viewport 的 <svg>、<pattern>、 
<symbol> 或 <marker> 元 素 
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应 用 元 素 


方法 或 属性 


结果 


( 续 ) 





SVGLocatable 

(占据 坐标 空间 的 元 素 
或 者 含有 变换 属性 的 元 
素 : 图 形 元 素 、<g> 或 
者 <svg>) 





.nearestViewportELement 





<symbol> 或 <marker> 


建立 当前 元 素 viewport 的 <svg>、<pattern>、 


元 素 





.farthestViewportElement 





包含 当前 元 素 的 最 顶 








层 <svg> 元 素 





.getBBox() 


以 SVGRect 对 象 的 形式 返回 当前 元 素 的 位 置 


和 边界 。 包 含 x、y、 


代表 坐标 和 能 包含 





width、height 属性 ， 分 


整个 图 形 的 最 小 抢 形 框 。 





出 





边界 不 受 笔画 宽度 、 裁 前 、 蒙 版 、 滤 镜 影 咱 








.getCTM() 


.getScreenCTM() 


.getTransformTOELement 


可 





Z 间 的 变换 











别 

边 

返回 一 个 SVGMatrix 对 象 ， 代 表 从 当前 元 素 的 
坐标 系统 到 nearestViewportELement 坐标 系统 
过 
返 
淮 





回 一 个 SVGMatrix 对 象 ， 代 表 从 当前 元 素 的 
标 系 统 到 文档 最 顶层 的 屏幕 坐标 或 者 客户 











端 坐标 之 间 的 变换 矩阵 。 这 个 方法 在 处 理事 
件 时 可 以 很 方便 地 转换 鼠标 / 指针 使 用 的 坐标 





和 图 形 坐 标 




















返回 一 个 SVGMatrix 对 象 ， 代 表 当 前 元 素 坐标 






















































































































































































(SVGEIenent) 到 指定 元 素 坐 标 之 间 的 变换 
SVGTransformable .transform 代表 定义 在 元 素 上 的 变换 原始 值 和 动画 过 程 
(能 使 用 transfornm 的 任 中 的 值 的 SVGAnimatedTransformList 
何 元 素 ) 
SvGStylable .style 返回 一 个 CSSStyleDeclaration 元 素 ， 代 表 内 
(能 使 用 style 属性 的 联 在 元 素 上 的 样式 。style 对 象 的 方法 可 以 参 
任何 元 素 ) 见 13.4 节 
SVGSVGELement .suspendRedraw 告诉 浏览 器 在 绘制 图 形 的 时 候 暂 停 指定 时 间 
(<svg>) (maxWaitTimeInMilliseconds) (最 长 一 分 钟 )。 如 果 你 希望 做 很 多 修改 ,但 
是 在 最 后 一 起 应 用 ， 则 这 种 方法 很 有 用 。 该 
方法 返回 一 个 数字 ID ， 稍 后 可 以 将 它 传 给 
unsuspendRedraw 
.UnsuspendRedraw( suspendID) 取消 有 D 代表 的 由 suspendRedraw 创建 的 暂停 
.unsuspendRedrawAll() 取消 SVG 上 所 有 由 suspendRedraw 创建 的 暂 
停 ， 恢复 SVG 绘制 
.pauseAnimations() 暂停 SVG 上 所 有 SMIL 动画 的 时 钟 
.uNnpauseAnimations() 恢复 SVG 上 所 有 SMIL 动画 的 时 钟 
.animationsPaused() 返回 true 或 false， 代 表 动 画 是 否 由 上 方 的 方 
法 暂停 
.getCurrentTime() 返回 SMIL 动画 使 用 的 时 钟 的 当前 值 。 正 常情 
况 下 ， 这 个 值 为 文档 加 载 之 后 的 秒 数 ， 但 是 暂 
停 动 画 或 者 是 直接 修改 这 个 值 都 可 能 影响 
.setCurrentTime(timeInSeconds) | 修改 SMIL 时 钟 的 值 ， 影 响 所 有 的 动画 
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应 用 元 素 


方法 或 属性 


( 续 ) 


结果 





SVGaSVGELement 


(<svg>) 


SVGUseElement 


(<use>) 


.getIntersectionList(rectangle, 


referenceElement) 





互 








返回 一 个 元 素 列表 ， 这 些 元 素 均 在 元 素 坐 
标 系 统 下 与 指定 的 矩形 (SVGRect 对 象 ) 有 重 
登 ， 并 且 这 些 元 素 全 部 是 指定 元 素 的 子 元 素 。 
只 有 能 响应 指针 事件 (取决 于 pointer-events 
属性 ， 默 认可 以 响应 ) 的 元 素 才 被 返回 。 指 
的 元 素 可 以 为 null， 表 示 只 要 是 <svg> 的 子 
素 都 可 以 外 
























































马 











.getEnclosureList(rectangle, 


referenceElement) 





区 别 在 于 只 

















定 

元 

与 getIntersectionList() 类 似 ， 
返回 完全 在 矩形 区 域 中 的 元 素 




















.checkIntersection(element, 


rectangle) 


返回 true 或 false， 代 表 在 <svg> 元 素 所 在 坐 
标 系 下 指定 元 素 与 指定 SVGRect 对 象 是 否 重 琶 











.checkEnclosure(element, 


rectangle) 


.CreateSVGXxx( ) 


.instanceRoot 














返回 true 或 false， 代 表 在 <svg> 元 素 所 在 坐 
标 系 下 指定 元 素 是 否 被 包含 在 指定 SVGRect 对 
象 中 

SVGSVGELement 支持 一 些 方法 用 来 创建 表 14-1 
中 的 各 种 数据 对 象 (SVGPoint、SVGAngle、 
SVGMatrix 等 )。 这 些 方法 不 接受 参数 ， 结 果 
会 被 初始 化 为 0 (除了 createsVGMatrix() 会 
返回 一 个 矩阵 ) 
包含 <use> 元 素 代表 的 图 形 shadow DOM 树 的 
最 顶层 节点 。shadow DOM (SVGELementInstance 
中 的 元 素 只 有 有 限 的 方法 : 你 不 能 直接 
操作 属性 或 者 样式 ， 但 是 它们 可 能 是 用 户 事 件 
的 目标 元 素 。 每 个 SVGELementInstance 都 有 一 个 
correspondingELement 属性 ， 链 接 到 它 复 制 出 来 
的 图 形 元 素 ， 还 有 一 个 correspondingUseElement 
属性 链接 回 <use> 元 素 " 








































































































SVGPathElement 
(<path>) 


.getTotalLength() 








以 用 户 坐 标 返 回 计 算 后 整个 路 径 的 长 度 (不 
计 move 命令 )。 这 个 值 在 不 同 的 客户 端 中 
因为 在 计算 一 些 曲 线 的 时 候 








pa| 











.getPpointAtLength(distance) 














返回 以 用 户 单位 计算 的 距离 起 点 distance 单 
位 的 点 ， 为 一 个 包含 x 和 y 属性 的 SVGPoint 
对 象 。 计 算 方 法 和 getTotalLength() 一 样 




















SVGPathData 
(<path> 元 素 和 其 他 支持 
路 径 数 据 属性 的 元 素 ， 


如 <animateMotion>) 





.pathSegList 








包含 一 个 代表 路 径 各 个 部 分 的 对 象 列 表 。 这 
个 列表 可 以 使 用 面向 对 象 的 方式 被 查询 
或 修改 ， 有 具体 方法 请 参见 SVG 规范 ()。 
pathsegList 属性 返回 与 d 属 性 对 应 的 路 
径 。 如 果 4d 属性 有 动画 的 话 ， 则 需要 使 用 
animatedPathSegList 属性 获取 路 径 当 前 状态 
的 对 象 列表 
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( 续 ) 





应 用 元 素 方法 或 属性 结果 
SVGPathData .normalizedpathSeglist 简化 版 的 路 径 各 部 分 列表 ， 每 个 部 分 被 转化 


(<path> 元 素 和 其 他 支持 
路 径 数 据 属性 的 元 素 ， 


如 <animateMotion>) 


为 绝对 坐标 下 的 移动 、 画 线 、 曲 线 或 者 关闭 
路 径 等 命令 。 与 上 面 类 似 ， 这 个 属性 也 有 一 
个 对 应 的 的 animatedNormaLizedPathSegList 
性 























SVGAnimatedPoints .points 可 一 个 SVGPointList， 代 表 与 元 素 相关 的 
(<polygon> 和 <polyline> 点 的 列表 。animatedPoints 属性 与 之 类 似 ， 代 
元 素 ) 有 动画 的 属性 

SVGTextContentELement | .getNumberOfChars() 


(任何 文本 元 素 ， 包 
括 <text>、<tspan> 和 
<textpPath> ) 


























素 。 多 字 节 字符 会 用 UTF-16 来 呈现 ， 然 后 








.getComputedTextLength() 


.getSubSstringLength 
(charNum, nChars) 


getStartPositionOofChar 
(charNum) 





属 
返 
点 
表 
返回 元 素 中 字符 的 总 数 ， 包 括 所 有 的 <tspan> 
元 
计 
返 





返回 在 用 户 坐 标 系 下 应 用 了 所 有 的 CSS 属性 
和 dx、dy 属性 之 后 包含 整个 文本 的 长 度 。 不 
包括 在 textLength 属性 基础 上 做 的 调整 

返回 截取 的 字符 串 一 部 分 的 长 度 。 截 取 的 方 
法 是 从 索引 为 charNun 开始 (第 一 个 字符 索引 
是 0)， 截 取 nChars 个 字符 ， 如 果 不 足 的 话 就 
到 字符 串 结束 为 止 

返回 一 个 带 x 和 y 属性 的 SVGPoint 对 象 ， 表 
示 在 用 户 坐 标 系 中 指定 字符 的 起 始 位 置 。 字 
符 与 起 始 位 置 的 相对 关系 取决 于 书写 模式 
(横向 或 纵向 、 从 左 到 右 或 从 右 到 左 ) 以 及 
baseline-alignment 属性 。 上 默认 情况 下 从 左 往 
右 的 文本 中 ， 起 始点 位 于 字符 的 最 左 侧 基线 
位 置 




































































.getEndPositionOfChar 
(charNum) 





与 getStartPosition0fChar 类 似 ， 但 返回 的 位 
置 代 表 字 符 结 束 时 所 在 的 基线 位 置 





.getExtentOfChar(charNum) 














与 getBBox() 类 似 ， 返 回 一 个 SVGRect 对 象 ， 
区 别 在 于 该 方法 针对 单个 字符 








.getRotationOfChar (charNum) 











返回 指定 字符 在 经 过 所 有 变换 之 后 的 旋转 角 
度 (以 度 为 单位 )， 不 包括 坐标 系 的 变换 











.getCharNumAtPosition(point) 




















返回 指定 位 置 的 字符 索引 值 ， 如 果 指 定 的 点 
没有 字符 的 话 返回 -1。 位 置 使 用 SVGPoint 对 
象 指定 ， 可 以 是 从 某 些 接口 方法 返回 的 ， 也 
可 以 在 <svg> 元 素 上 调用 createSVGPoint() 然 
后 设置 x 和 y 属性 的 






































< 
应 用 元 素 方法 或 属性 结果 
ElementTimeControl 和 | .targetELement SVG 动画 修改 的 SVGELement 元 素 
SVGaAnimationELement .beginELement() 如 果 动 画 没 有 被 restart 属性 never 或 者 
(任何 SVG 动画 元 素 : whenNotActive 阻止 的 话 ， 立 即 开始 动画 


<animate>、<set>、 
<animateTransform> 和 


<animateMotion>) 








.beginElementAt(offset) 





始 了 -offset 秒 之 后 一 样 





在 offset 秒 之 后 开始 动画 。 如 果 offset 是 负 
值 ， 则 动画 会 立即 开始 ， 但 进程 会 像 


已 经 开 






























































.endELement() 立即 结束 当前 正在 运行 的 动画 (包括 重复 的 ) 

.endElementAt(offset) offset 秒 后 结束 当前 动画 

.getStartTime() 如 果 动 画 正 在 运行 ， 返回 动画 相对 SVG 时 钟 
的 开始 时 间 。 如 果 动 画 还 未 开始 ， 则 返回 动 
画 将 要 开始 的 时 间 。 其 他 情况 下 ， 抛 出 错误 

.getCurrentTime() 返回 SVG 动画 时 钟 的 当前 时 间 (单位 为 秒 )， 
与 在 SVG 元 素 上 调用 getCurrentTime() 效果 
一 样 

.getSimpLeDuration() 返回 动画 每 一 轮 的 时 长 (dur 属性 ) ， 如 果 未 








定义 则 抛 出 错误 


[a] 截稿 时 ，Firefox 30 不 支持 getIntersectionList、getEnclosureList、checkIntersection、checkEnclosure。 
[b] Firefox 30 也 不 支持 <use> 元 素 的 shadow DOM 树 访 问 ， 也 未 实现 SvGELementInstance 接口 。 


[c] IE11 不 支持 SMIL 动画 ， 
使 用 beginELement 和 beginELementAt 会 抛 上 














14.3 ”使 用 ECMAScript/JavaScript 创 建 SVG 


下 面 这 个 例子 是 一 个 简单 的 模拟 时 钟 ， 如 图 














HH 错误。 

















14-2 所 示 。 示 例 14-2 是 SVG 代码 。 


因此 动画 相关 的 属性 和 方法 在 其 中 都 未 实现 。Apache Batik SVG viewer 1.7 中 ， 














14-2: 模拟 时 钟 


示例 14-2: 模拟 时 钟 的 SVG 代码 


<svg xmlns="http://www.w3.0org/2000/svg" 


id="clock" width="250" height="250" viewBox="0 0 250 250"> 
<title>SVG Analog Clock</title> 
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<circle id="face" cx="125" cy="125" r="100" 
style="fill: white; stroke: black"/> 
<g id="ticks" transform="translate(125,125)"> 


d="M95,0 
d="M95,0 
d="M95,0 
d="M95,0 
d="M95,0 
d="M95,0 
d="M95,0 
d="M95,0 
d="M95,0 
d="M95,0 
d="M95,0 
d="M95,0 


<path 
<path 
<path 
<path 
<path 
<path 
<path 
<path 
<path 
<path 
<path 
<path 
</g> 


L100;-=5 
L100,-5 
L100,-5 
L100,=5 
L100,-5 
L100,-5 
L100,-5 
L100;-5 
L100;=5 
L100,-5 
上 1005=5 
L100,-5 


L100,5 
E100.,5 
L100,5 
L100,5 
L100,5 
L100,5 
E100..5 
L100,5 
L100;5 
L100,5 
L100;5 
L100,5 


Zn 
Zn 
Zn 
Zn 
Zn 
Zn 
Zn 
Zn 
Zn 
Zn 
Zn 
Zn 


<g id="hands" styLe= "stroke: black; 

stroke-width: Spx; 

stroke-linecap: round;"> 

<path id="hour"” d="M125,125 L125,75" 
transform="rotate(0, 125, 125)"/> 

<path id="minute" d="M125,125 L125,45" 
transform="rotate(0, 125, 125)"/> 

<path id="second" d="M125,125 L125,30" 
transform="rotate(0, 125, 125)" 
style="stroke: red; stroke-width: 2px" /> 


</g> 


transform="rotate(30)" 

transform="rotate(60)" 

transform="rotate(90)" 

transform="rotate(120)" 
transform="rotate(150)" 
transform="rotate(180)" 
transform="rotate(210)" 
transform="rotate(240)" 
transform="rotate(270)" 
transform="rotate(300)" 
transform="rotate(330)" 
transform="rotate(360)" 


/> 
/> 
/> 
/> 
/> 
/> 
/> 
/> 
/> 
/> 
/> 
/> 


<circle id="knob" r="6" cx="125" cy="125" style="fill: #333;"/> 


</svg> 





这 段 代码 不 是 特别 复杂 ， 却 显得 很 元 余 。 标 识 12 个 小 时 的 12 个 元 素 的 写法 几乎 完全 一 
样 ， 只 有 rotation 属性 不 同 。 你 可 以 使 用 <use> 元 素来 避免 重复 路 径 数据 ， 但 它 也 不 会 简 
化 多 少 工作 。 如 果 你 希望 给 它们 加 上 数字 ， 还 需要 12 个 <text> 元 素 。 而 如 果 你 希望 添加 
分 钟 标记 ， 则 需要 添加 60 个 元 素 。 


在 写 程序 时 ， 如 果 需 要 重复 做 某 件 事情 很 多 次 ， 你 会 很 自然 地 使 用 循环 或 者 函数 。 在 





13.4.6 节 ， 我 们 使 用 了 JavaScript 来 基于 用 户 输入 创建 任意 数量 的 SVG 
我 们 也 可 以 使 用 同样 的 方法 来 创建 图 


形 时 更 应 该 如 此 。 


示例 14-3 在 支持 JavaScript 的 SVG 阅 











乡 ， 尤 其 是 在 有 很 多 重复 


读 器 



































元 素 。 在 本 例 中 ， 


图 形 且 是 比较 规则 的 几何 图 


中 创建 了 和 之 前 一 样 的 输出 。 它 使 用 了 基本 


的 DOM 方法 和 本 章 介 绍 过 的 SVG DOM 特性 。<svg> 元 素 仅 包 含 两 个 标记 元 素 : 一 个 
<title> 和 一 个 <script>。 


示例 14-3: 使 用 ECMAScript 创建 模拟 时 钟 


<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" 





id="clock" width="250" height="250" viewBox="0 0 250 250" 
onload="init()" > 
<title>Scripted Analog Clock</title> 


<script type="application/ecmascript"> <![CDATA[ 


/* 图 形 会 包含 在 <svg> 对 象 中 */ 


var clock; O@ 





function init() { @ 
/* 选择 空 <svg> 元 素 */ 
clock = document.getElementById("clock"); 
var svgns = clock.namespaceURI, 
doc = document; 





clock.suspendRedraw(1000); © 





/* 创建 表盘 */ @ 

var face = doc.createElementNS(svgns, "circle"); 
face.cx.baseVal.valye = 125; 

face.cy.baseVal.valuyue = 125; 

face.r.baseVal.value = 100; 

face.style.cssText = "fill: white; stroke: black"; 
clock.appendChild( face ); 


/* 创建 小 时 标识 的 组 */ 

var ticks = clock.appendChild( 
doc.createElementNS(svgns, "g") ); 

ticks.setAttribute("transform", "translate(125,125)" ); 





/* 创建 小 时 标识 * 
var tickMark; 
for (var i = 1; i <= 12; i++) { © 
tickMark = doc.createElementNS(svgns, "path"); 
tickMark.setAttribute( "d", 
"M95,0 L100,-5 L100,5 Z" ); 
tickMark.setAttribute( "transform", 
"rotate(" + (30*i) + ")" ); 
ticks.appendChild( tickMark ); 
} 


/* 创建 时 针 */ 
var hands = clock.appendChild( 
doc.createElementNS(svgns, "g") ); 
hands.style.cssText = 
"stroke: black; stroke-width:5px; stroke-linecap: round;"; 








var hourHand = hands.appendChild( 
doc.createElementNS(svgns, "path") ); 

hourHand.id = "hour"; 

hourHand.setAttribute("d", "M125,125 L125,75"); @ 

hourHand.setAttribute("transform", "rotate(0, 125, 125)"); 














/* 省 略 类 似 的 创建 分 针 和 秒针 的 代码 */ 
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/* 创建 中 心 的 元 素 */ @ 

var knob = doc.createElementNS(svgns, "circle"); 
knob.setAttribute("cx", "125"); 
knob.setAttribute("cy", "125"); 
knob.setAttribute("r", "6"); 
knob.style.setPproperty("fill", "#333", null); 
clock.appendChild( knob ); 





clock.unsuspendRedrawAll(); © 
} 


// IJ> 
</script> 
</svg> 

@ 脚本 声明 了 一 个 全 局 变量 来 保存 <svg> 元 素 ,， 但 大 量 的 代码 在 初始 化 函数 (init()) 
中 ， 这 个 函数 在 SVG 加 载 后 才 会 运行 。 

@ init() 函数 开头 选择 了 <svg> 元 素 ， 同 时 还 声明 了 一 些 变量 以 便 后 续 使 用 。 当 创建 一 个 

新 元 素 时 ， 从 任何 一 个 已 有 的 元 素 上 取 .namespaceURI 属性 是 一 个 好 方法 ， 这 样 可 以 避 
免 手 工 输入 一 大 串 URL。 

@ 尽管 不 是 必须 的 ， 但 是 在 进行 大 量 DOM 操作 之 前 暂停 SVG 更 新 绘制 可 以 提升 在 某 些 
阅读 器 中 的 性 能 。 

@ 创建 了 一 个 <circle> 元 素 作为 表盘 ， 样 式 和 属性 使 用 SVG DOM 属性 来 指定 ， 然 后 将 
这 个 元 素 添 加 到 SVG 中 。 

回 这 里 就 是 循环 的 过 程 。for 循环 运行 其 中 的 代码 12 次 来 创建 12 个 小 时 的 标记 ， 并 计算 
它们 旋转 的 角度 。 值 得 注意 的 是 ， 对 初始 化 复杂 的 属性 〈 比 如 d 或 者 transform) 来 说 ， 
使 用 setAttribute() 传人 一 个 字符 串 会 比 维护 复杂 的 DOM 对 象 更 容易 。 

@ 指针 初始 化 时 指向 0 点 ， 旋 转角 度 为 0， 这 样 后 续 变 换 角 度 时 计算 更 容易 。 

@ 为 了 与 表盘 对 比 ， 中 心 的 圆 <circle> 使 用 设置 DOM 属性 的 方式 来 初始 化 。 这 还 是 需 
要 6 行 代码 。 

@ DOM 构建 完毕 时 记得 取消 之 前 的 suspendRedraw() 调用 |! 















































使 用 脚本 简化 了 绘制 小 时 标记 的 代码 ， 但 是 增加 了 绘制 简单 元 素 ( 比 如 表盘 的 圆 ) 的 代码 
量 。 这 也 是 像 Snap.svg 这 样 的 JavaScript 库 得 以 流行 的 主要 原因 ， 它 们 对 一 些 常 用 操作 有 
更 简单 的 方法 ， 比 如 创建 元 素 或 者 设置 属性 之 类 。 














我 们 会 在 稍 后 介绍 这 部 分 内 容 ， 但 在 开始 讨论 库 (更 简单 的 方法 ) 之 前 ， 还 是 继续 使 用 
原始 的 SVG 来 绘制 表盘 。 毕 竟 ， 我 们 还 面临 着 一 个 大 问题 : 我们 的 钟 无 法 告诉 我 们 当前 
时 间 。 


14.4 ”使 用 脚本 控制 动画 


让 时 钟 走 起 来 的 一 种 方法 是 在 指针 上 使 用 <animateTransform> 元 素 。 你 可 以 让 秒针 每 
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分 钟 旋转 360 度 ， 分 针 每 小 时 旋转 360 度 ， 时 针 每 12 小 时 旋转 360 度 。 但 即便 如 此 ， 
<animateTransform> 仍然 不 能 让 时 钟 显示 正确 的 时 间 。、 


除 此 之 外 ， 还 有 一 些 仅 使 用 动画 元 素 不 能 轻易 完成 的 事情 。 比 如 它们 不 能 响应 过 去 的 用 户 
事件 ， 也 不 能 对 未 来 的 事件 作出 有 针对 性 的 响应 。 如 果 动 画 依 赖 于 逻辑 、 数 据 或 者 复杂 的 
用 户 交 互 ， 那 么 使 用 (其 他 程序 中 的 ) 脚本 来 控制 动画 就 比 直接 定义 在 XML (文档 结构 ) 
中 更 合理 。 


使 用 JavaScript 创建 动画 的 方法 就 是 在 动画 过 程 中 不 断 修改 需要 动画 的 属性 ， 直 到 从 初始 
值 变 为 结束 时 的 值 。 如 果 你 刚刚 开始 学 习 编 程 的 话 ， 可 能 会 想到 使 用 while(true) 循环 来 
持续 更 新 属性 。 


这 的 确 能 保证 你 的 时 钟 始终 是 准确 的 ， 但 不 推荐 这 样 做 。 使 用 while(true) 的 话 相 当 于 在 
频繁 地 询问 时 钟 :“ 现 在 什么 时 间 了 ? ”这 样 会 使 用 程序 没有 空闲 时 间 来 做 其 他 的 事情 。 
在 SVG 脚本 中 ， 则 会 让 计算 机 没有 机 会 处 理 其 他 的 任务 。 


jol 



































其 实在 上 述 例子 中 ， 每 一 次 循环 只 需要 不 到 1 毫秒 的 时 间 ， 让 指针 为 这 么 短 的 时 间 产 生 旋 
转 完 全 没有 意义 。 相 较 而 言 ， 大 部 分 的 电影 、 视 频 会 每 秒 更 新 画面 30 到 60 次 。 这 个 速度 
被 称 为 视频 的 帧 率 (frame rate)“，30~60 次 已 经 足够 让 人 有 眼 认为 画面 是 连续 的 了 。 


计算 机 的 显示 也 有 帧 率 。 当 内 容 变化 时 ， 显 示 器 上 画面 的 一 部 分 或 者 整个 画面 会 更 新 。 
但 是 ， 计 算 机 显示 的 帧 率 取 决 于 计算 机 在 后 台 有 多 少 工作 量 。 如 果 计 算 机 陷入 无 休止 的 
循环 中 ， 则 没有 时 间 来 重 绘 屏 幕 ， 这 样 不 管 你 更 新 属性 有 多 快 ， 你 的 动画 都 会 变 得 很 慢 
或 者 很 卡 。 


为 了 让 计算 机 创建 出 流畅 的 动画 , 你 需要 更 礼貌 一 些 。 当 调用 requestAnimationFrame(ani- 
mationfunction) 时 ， 你 其 实在 说 :“ 计 算 机 ， 下 次 当 你 准备 重 绘 屏幕 的 时 候 ， 请 先 运 行 这 
个 函数 。” 函数 被 调用 时 会 传 入 一 个 时 间 蕉 ， 这 个 时 间 稚 在 同一 帧 的 函数 中 都 是 一 样 的 值 ， 
你 可 以 使 用 这 个 值 来 进行 动画 运算 。( 这 个 时 间 惟 基于 文档 时 钟 ， 而 不 是 系统 时 钟 ， 因 此 
不 能 用 来 设置 时 间 。) 


如 果 你 在 动画 函数 的 最 后 使 用 requestAnimationFrame 并 将 它 自己 作为 参数 传 进 去 ， 则 计 
算 机 会 以 尽量 高 的 频率 在 屏幕 上 绘制 动画 ， 这 样 可 以 创建 一 个 很 流畅 的 动画 而 又 不 会 消耗 
太 多 的 计算 机 资源 。 需要 注意 ， 如 果 包 含 脚本 的 容器 被 最 小 化 或 者 被 隐藏 ， 则 在 它 显 示 出 
来 之 前 ， 动 画 函 数 都 不 会 被 调用 。 




































































注 1: SMIL 规范 定义 了 与 系统 时 钟 同步 动画 起 始 时 间 的 格式 ， 但 在 大 部 分 的 浏览 器 和 SVG 浏览 器 中 都 未 
实现 。 

注 2: 也 可 简写 为 FPS，frames per second。 一 一 译 者 注 

注 3: 你 可 能 昕 过 一 个 编程 术语 叫 递归 ， 即 一 个 函数 调用 它 自己 。 这 里 并 不 是 递归 ， 因 为 你 的 函数 调用 的 是 
requestAnimationFrame()， 而 不 是 它们 自己 。 
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使 用 setTimeout 模拟 requestAnimationFrame 


相对 来 说 ，requestAnimationFramne() 在 DOM 规范 中 还 是 一 个 比较 新 的 方法 ， 有 一 些 
比较 老 的 浏览 器 以 及 Batik 软件 并 不 支持 。 为 了 能 让 脚本 顺利 执行 ， 可 以 先 测试 这 个 
函数 是 否 存 在 ， 如 果 不 存在 的 话 先 像 下 方 代 而 那 样 模拟 一 个 。 这 个 模拟 的 方法 使 用 了 
setTimeout(function， waitTime) 方法 ， 它 可 以 告诉 计算 机 在 waitTime 毫秒 之 后 再 运 
行 水 数 。 下 面 的 代码 应 该 放 在 <script> 最 前 面 : 

if (!window.requestAnimationFrane) { @ 


window.requestAnimationFrame = function(animationFunction) { @ 


function wrapperFunction() { © 
animationFunction(Date.now()); 


} 


setTimeout(wrapperFunction, 30); @ 
} 
} 


@ 如 果 requestAnimationFrame 方法 不 存在 …… 
@ 创建 你 自己 的 函数 ， 并 将 它 保存 到 全 局 对 象 的 requestAnimationFrame 属性 中 。 
这 个 函数 必须 接受 一 个 动画 回调 函数 作为 参数 。 
图 将 传 入 的 动画 函数 包 训 在 一 个 不 接受 参数 的 函数 中 。 包 误 函 数 调用 动画 函数 时 
会 传 入 时 间 惟 作为 参数 。Date.now() 返回 的 是 整 型 的 系统 时 间 崔 。 
@ setTimeout 方法 会 在 计算 机 空闲 的 时 候 调 用 动画 函数 ， 但 是 调用 间隔 不 会 小 于 
30 毫秒 ， 即 大 约 每 秒 33 帧 。 


Sy 函数 考虑 的 情况 没有 requestAnimationFrame() 那么 细致 ， 它 不 会 调整 计 

算 机 当前 正在 做 的 事情 ， 而 且 无 论 窗口 是 否 可 见 都 会 始终 执行 动画 函数 。 这 上 段 示例 代 
码 也 不 能 完全 替代 requestAnimationFrame()， 尤 其 是 它 不 会 将 多 个 动画 调用 与 SMIL 
动画 时 钟 “ 对 齐 "， 也 不 能 取消 某 个 动画 帧 的 调用 请 求 。 不 过 ， 由 于 我 们 使 用 的 调用 等 
待 时 间 还 算 比 较 长 ， 对 示例 程序 来 说 ， 动 画 的 流畅 度 应 该 还 是 能 接受 的 。 使 用 时 将 它 
插 到 你 的 代码 最 前 面 (或 者 在 文件 最 前 面 放 入 单独 的 script 标记 ) 。 














示例 14-4 展示 了 使 用 requestAnimationFrame() 更 新 时 钟 指 针 的 代码 。 


示例 14-4: 脚本 驱动 的 SVG 时 针 动 画 
全 局 变量 


/* 引用 代表 指针 的 路 径 元 素 */ 
var hourHand ， 

minuteHand, 

secondHand; 


/* 引用 旋转 指针 的 SVGTransform 对 象 */ 











var secondTransform, 


minuteTransform, 
hourTransform; 

/* 时 间 常 量 */ 

var secPerMinute = 60， 
SecPerHour = 60*60， 


SecPer12Hours = 60*60*12; 
初始 化 变量 (init() 函数 ) : 


function init() { 
/* 
获取 引用 代表 指针 的 路 径 元 素 
*f 
hourHand = document.getElementById("hour"); 
minuteHand = document.getElementById("minute"); 
secondHand = document.getElementById("second"); 














* 获取 代表 当前 旋转 的 变量 矩阵 SVGTransform 对 象 rotate(0，125，125) : 


5 


secondTransform = secondHand.transform.baseVal.getItem(0); 
minuteTransform = minuteHand.transform.baseVal.getItem(0); 


hourTransform = hourHand.transform.baseVal.getItem( 
updateClock(); /* 让 时 钟 开 始 运 行 */ 
} 


updateClock 函数 : 


function updateClock() { 

/* 获取 系统 时 间 */ @ 

var date = new Date(); 

/* 计算 从 0 点 开始 过 去 的 秒 数 */ 

var time = date.getMilliseconds()/1000 + 
date.getSeconds() + 
date.getMinutes()*60 + 
date.getHours()*60*60; 四 


/* 计算 旋转 角度 */ @ 
var s = 360*( time % secPerMinute )/secPerMinute, 
m = 360*( time % secPerHour )/secPerHour, 


0); 


h = 360*( time % secPer12Hours )/secPer12Hours; 


/* 使 用 SVaTransform.setRotate(angLe，cx，cy) 来 更 新 旋转 角度 : 





secondTransform.setRotate( s, 125, 125); @) 
minuteTransform.setRotate( m, 125, 125); 
hourTransform.setRotate( h, 125, 125); 


window.requestAnimationFrame( updateClock ); © 
// 重复 下 一 帧 
} 
@ 构造 函数 new Date() [以 JavaScript 对 象 的 形式 返回 
一 秒 )。 








< 


系统 日 期 和 时 间 (精确 到 千 分 之 
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用 


SVG DOM 


213 


@@ date.getPart() 形式 的 函数 会 以 整形 返回 日 期 的 一 部 分 。 使 用 这 些 方法 ， 可 以 将 当前 时 
间 计 算 成 与 今天 0 点 的 差 值 ( 以 秒 为 单位 )。 

@ 每 个 指针 的 旋转 角度 〈 自 零点 开始 旋转 的 角度 ) 使 用 之 前 定义 的 常量 进行 计算 。% 是 取 
模 运 算 符 ， 返 回 整 除 后 的 余数 。 

@ 在 初始 化 函数 中 ， 我 们 访问 了 每 个 指针 transform 属性 中 SVGTransformList 中 的 第 
一 个 (也 是 唯 个 ) 变换 的 basevaL， 并 将 这 个 SVGTransforn 对 象 存 到 变量 中 。 每 
次 更 新 的 时 候 ， ee 直接 修改 这 个 对 象 而 不 是 使 用 
setAttribute， 这 可 以 让 浏览 器 省 去 解析 属性 字符 串 的 时 间 。 

@ updateClock 的 最 后 一 行使 用 requestAnimationFrame 来 让 自己 在 下 次 屏幕 刷新 时 再 次 被 
调用 。 


动画 循环 是 从 初始 化 函数 的 最 后 一 行 updateCtock() 调用 开始 的 。 初 始 化 函数 本 身 则 是 
通过 在 <svg> 开始 标记 中 添加 ontoad="init()" 来 运行 。 最后， 一 个 完整 的 时 钟 可 以 在 本 
书 的 网 站 上 看 到 : http:Woreillymedia.github.io/svg-essentials-examples/ch14/animated_clock 


]jS.Svg。 




















14.5 ”使 用 JavaScript 库 


在 示例 14-3 中 ， 我 们 通用 手工 调用 JavaScript 创建 元 素 的 方式 创建 了 整个 时 钟 。 在 这 个 
过 程 中 能 感觉 到 ， 使 用 这 种 方式 生成 元 素 是 痛苦 而 效率 低下 的 。 应 该 有 一 种 更 好 的 方式 ， 
事实 上 ， 也 真 的 有 。 你 可 以 使 用 免费 的 开源 JavaScript 库 ， 比 如 D3.js (http:/d3js.org/)、 
Raphaé] (http://raphaeljs.com/)、Snap.svg (http://snapsvg.io/) 等 来 简化 工作 。 这 些 库 都 属 
于 外 部 脚本 ， 和 暂时 只 考虑 了 Web 浏览 嚣 环境。 不过， 它们 都 有 一 系列 很 好 用 的 方法 ， 你 自 
己 编写 的 时 候 可 以 借用 。 


使 用 什么 库 取决 于 需求 。D3.js 是 一 个 “维护 基于 数据 产生 的 文档 的 JavaScript 库 ”。 它 最 


适用 于 维护 一 系列 相似 元 素 ， 定 义 它们 的 属性 、 样 式 以 及 根据 数据 数组 中 对 应 的 值 来 响应 
事件 。 例 如 ， 如 果 你 需要 一 个 可 互动 性 很 强 的 柱状 图 表 ， 那 么 D3jjs 会 是 一 个 很 好 的 选择 。 























Raphaél 和 Snap.svg 则 是 更 通用 的 库 ， 它 们 的 目标 是 使 得 创建 和 修改 带动 画 的 图 形 更 加 容 
易 。Raphasl 还 通过 将 图 形 转换 为 其 他 形式 的 图 形 命令 的 方式 与 老 版 本 浏览 器 兼容 。Snap 
则 是 由 Adobe Web Platform 团队 推出 的 ， 它 为 现代 训 览 器 而 生 ， 只 使 用 了 SVG。 下 面 的 例 
子 将 使 用 Snap。 








这 些 库 都 会 将 DOM 元 素 包 于 到 自 定义 对 象 中 ， 这 个 对 象 有 一 些 额外 的 属性 和 方法 可 用 。 
在 Snap 中 ， 包 含 图 形 的 <svg> 元 素 被 包 囊 为 Paper 对 象 。Snap 提供 了 一 些 方法 可 供 调 用 ， 
可 以 用 这 些 方法 来 添加 图 形 元 素 、 修 改 属 性 和 处 理事 件 。 


























用 于 增强 HTML 处 理 的 JavaScript 库 有 很 多 ， 但 在 处 理 SVG 时 请 小 心 选用 。 
这 是 因为 它们 没有 任何 针对 图 形 的 方法 ， 其 至 如 果 没 有 处 理 好 XML 命名 空 
间 的 话 ， 在 处 理 普 通 任务 时 也 可 能 会 遇 到 问题 。 比 如 ， 流 行 的 jQuery 库 (至 
截稿 时 ) 没有 任何 在 SVG 命名 空间 中 创建 元 素 的 方法 ， 如 果 你 让 jQuery 为 
你 创建 一 个 圆 ， 它 会 返回 一 个 HTMLUnknownELement 对 象 。 而 针对 SVG 写 
的 库 ， 比 如 D3 和 Snap， 知 道 SVG 中 的 元 素 名 ， 也 就 知道 circle 是 表示 
SVGCircleElement, 





















































下 面 是 基于 Snap 的 动画 时 针 的 XML: 


<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.0org/2000/svg" 
xmlns:xlink="http://www.w3.0rg/1999/xlink" 
id="clock" width="250" height="250" viewBox="0 0 250 250" 
onload="init()" > 
<title>Snap.svg Analog Clock</title> 


<script type="application/ecmascript" 
xlink:href="snap.svg-min.js"></script> 
<script type="application/ecmascript"> 


/* 初始 化 和 更 新 时 针 的 函数 放 这 里 */ 
</script> 
</svg> 
第 一 个 <script> 元 素 引 入 了 Snap 库 。 我 们 直接 使 用 了 部 署 在 自己 服务 器 上 的 压缩 版 本 的 
脚本 ， 即 库 的 代码 已 经 被 去 掉 了 空格 和 注释 ， 并 且 变 量 名 也 被 修改 得 更 短 。 压 缩 版 本 的 
Snap.svg v0.3.0 大 小 是 72 KB。 也 就 是 说 ， 下载 SVG 库 消 耗 的 流量 大 约 和 下 载 一 个 中 等 复 
杂 度 的 PNG 图 片 差不多 。 











在 HTML 文件 中 引入 外 部 库 需 要 使 用 src 属性 指定 文件 URL， 同 时 要 注意 必须 包含 开始 
和 结束 标记 ， 空 <script> 元 素 在 老 版 本 的 浏览 器 中 不 能 正常 工作 “。 





第 二 段 脚本 与 前 面 的 例子 差不多 ， 调 用 init() 函数 绘制 时 钟 ， 然 后 使 用 updateClock() 让 


如 果 你 自己 实验 这 些 例子 ， 请 确保 使 用 的 是 最 新 的 snap.svg-min.js。 这 个 库 
最 早 是 为 了 修改 在 HTML 页 面 中 内 岁 的 SVG 代码 而 设计 的 ， 早 于 0.3.0 的 版 
本 运行 在 独立 的 SVG 文件 中 时 有 bug (https://github.com/adobe-webplatform/ 
Snap.svg/issues/88 ) 。 


注 4: 指 不 能 使 用 的 方式 引入 脚本 。 一 一 译 者 注 
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示例 14-5 展示 了 使 用 Snap 绘制 时 钟 的 代码 。 它 和 示例 14-3 的 结构 (和 结果 ) 是 一 样 的 ， 
但 展示 了 很 多 Snap 方法 的 使 用 。 


示例 14-5: 使 用 Snap.svg 绘制 模拟 时 钟 
/* 绘制 时 钟 的 Paper 对 象 */ 


var clock; 
/* 指向 代表 指针 的 Snap 元 素 */ 
var hourHand, 

minuteHand, 

secondHand; ©@ 


/* 时 间 转 换 常量 */ 

var secPperMinute = 60， 
secPerHour 60*60, 
secPer1i2Hours = 60*60*12; 


function init() { @ 
/* 选择 空 的 <svg> 元 素 作为 Paper 对 象 */ 
clock = Snap("#clock"); 


/* 创建 表盘 */ @ 
var face = clock.circle(125, 125, 100); 
face.attr({fill: "white", stroke: "black"}); 


/* 创建 小 时 标记 */ 
var ticks = clock.g(); 
ticks.transform("t125,125"); @ 


var tickMark; 

for (var i = 1; i <= 12; i++) { 日 
tickMark = clock.path("M95,0 L100,-5 L100,5 2Z"); 
tickMark.transform("rotate("+ (30*i) + ")"); 
ticks.add(tickMark); 


} 


/* 创建 指针 */ 

hourHand = clock.path("M125,125 L125,75"); 
minuteHand = clock.path("M125,125 L125,45"); 
secondHand = clock.path("M125,125 L125,30"); 


var hands = clock.g(hourHand, minuteHand, secondHand); © 
hands.attr({stroke: "black", 

"stroke-width": 5, @ 

"stroke-linecap": "round"}); 
secondHand.attr({stroke: "red", strokeWidth: "2px"}); 


/* 中 间 的 圆 */ 
clock.circle(125, 125, 6).attr({fill: "#333"}); © 








updateClock(); © 
} 


function updateClock() 





/* 调整 指针 */ 
} 


@ 尽管 全 局 变量 名 是 一 样 的 ， 但 它们 的 内 容 是 不 同 的 。ctLock 是 Snap 中 的 Paper 对 象 ， 代 
表 指 针 的 变量 也 会 指向 Snap 包 庄 后 的 元 素 对 象 。 

外 在 init() 函数 中 ，Snap(selector) 方法 使 用 一 个 查询 字符 串 (CSS 选择 器 格式 ) 创建 
了 一 个 包含 <svg> 的 Paper 对 象 。 这 个 函数 还 可 以 使 用 Snap(width，height) 的 方式 来 
调用 ， 将 以 指定 的 尺寸 创建 一 个 新 的 SVG 元 素 。 

@@ Paper.circte(cx，cy，Fr) 以 指定 的 坐标 和 半径 创建 了 一 个 <circle>， 并 将 它 加 入 
SVG 中 。 这 个 Snap 包 庄 后 的 对 象 被 赋值 给 一 个 变量 ， 以 便 在 下 一 行 修改 它 的 属性 。 
Element.attr(attrValues) 函数 可 以 传 入 一 个 JavaScript 对 象 一 次 设置 多 个 属性 。( 我 们 
使 用 表示 属性 是 因为 截止 到 v0.3.0，Snap 都 没有 提供 直接 设置 内 联 样式 的 方法 。) 

@ 使 用 Paper.g() 创建 了 一 个 空 的 <g> 元 素 ticks。 可 以 使 用 ticks.attr() 来 设置 
transform 属性 ， 也 可 以 使 用 Snap 为 这 种 常见 任务 提供 的 快捷 方法 。 变 换 的 命令 
translate(125,125)t125,125 也 有 简便 的 写法 ， 可 以 写成 t125,125。 

器 for 循环 中 使 用 Paper.path(pathData) 创建 了 时 针 标 识 ， 稍 后 会 使 用 ticks. 
add(tickMark) 将 这 些 标识 移 到 <g> 中 。 这 里 使 用 了 标准 SVG 语法 设置 变换 属性 ， 只 是 
为 了 展示 两 种 方法 都 是 可 行 的 。 

@ 时 钟 指 针 被 创建 后 ， 接 下 来 使 用 Paper.g(Element，Element，...) 创建 一 个 组 ， 并 将 这 
些 元 素 移 到 组 中 。 

@ 当 使 用 JavaScript 对 象 语 法 设置 属性 的 时 候 ， 如 果 属 性 名 中 含有 中 杠 (-)， 你 需要 将 它 
用 引号 包 豆 起 来 〈(“stroke-witdth”) 或 者 将 它 转 成 驼峰 式 (strokeWidth)。 

@ 因为 Snap 在 创建 元 素 的 时 候 也 会 返回 这 些 元 素 ， 所 以 你 可 以 将 方法 连 级 起 来 。 

和 前 面 的 例子 一 样 ， 初 始 化 函数 的 最 后 一 行 是 调用 updateCtock() 。 






































如 果 你 在 浏览 嚣 中 载 入 这 个 文件 ， 会 发 现 它 和 图 14-2 完全 一 样 。 上 面 的 SVG 做 的 事情 和 
示例 14-3 一 样 ， 但 是 代码 更 好 懂 、 更 炫 酷 了 。 


剩 下 的 任务 就 是 让 我 们 用 Snap 写 的 时 钟 动 起 来 了 。 代 码 见 示例 14-6。 这 次 我 们 不 再 使 用 
requestAnimationFrame 手工 调用 动画 ， 而 是 使 用 Snap 的 ELement .animate() 方法 来 处 理 动 
画 。 它 会 自动 调用 requestAnimationFrame 方法 ， 如 果 浏 览 器 不 支持 的 话 ， 会 使 用 自己 定 
义 的 模拟 方法 。 






































Element.animate() 方法 有 两 个 必 填 参数 和 两 个 可 选 参数 。 


。 一 个 属性 对 象 (和 Element.attr() 格式 一 样 )， 指 定 动画 结束 时 各 个 属性 的 值 。 

。 以 毫秒 指定 动画 时 长 ， 即 动画 属性 多 久之 后 达到 终 值 。 

。 可 选 参数 ， 一 个 用 于 定义 在 指定 时 间 内 属性 变化 率 的 函数 ( 缓 动 函数 )。Snap 源码 中 定 
义 了 一 些 函 数 ， 它 们 可 以 通过 Snap 的 mna 对 象 访问 : mina.easeinout 代表 平滑 的 加 速 
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和 减速 ， 而 mina.bounce 会 以 很 快 的 速度 到 达 终 值 ， 然 后 回 弹 几 次 ， 最 后 才 稳 定 下 来 。 
勺 速 运动 请 使 用 mina. linear。 
。 可 选 函 数 ， 一 个 在 动画 结束 之 后 会 被 调用 的 函数 。 可 以 用 来 产生 无 限 循 环 的 动画 。 


示例 14-6: 使 用 Snap.svg 使 时 钟 产生 动画 
function updateClock() 
{ 
/* 获取 系统 时 间 */ @ 
var date = new Date(); 
/* 计算 从 9 点 开始 过 去 的 秒 数 */ 
var time = date.getMilliseconds()/1000 + 
date.getSeconds() + 
date.getMinutes()*60 + 
date.getHours()*60*60; 


/* 计算 旋转 角度 */ 
var s = 360*( time % secPerMinute)/secPerMinute， 
m = 360*( time % secPerHour )/secPerHour， 
h = 360*( time % secPer12Hours )/secPer12Hours; 


secondHand.transform("r" + s +",125,125"); @ 
minuteHand.transform("r" + m +",125,125"); 
hourHand.transform("r" + h +",125,125"); 


secondHand.animate({transform: + [s + 360, 125, 125]}, © 
60000，mina. 和 

minuteHand.animate({transform: "r" + [m + 6, 125, 125]}, 
60000, mina.linear); 

hourHand.animate({transform: "r" + [h + 0.5, 125, 125]}, 
60000, mina.linear, updateClock); @ 


} 


@ 计算 方法 与 示例 14-4 一 样 。 

@ 使 用 Snap 的 快捷 方法 和 变换 的 语法 来 设置 时 间 。 

@ 调用 animate 函数 使 时 钟 走 起 来 。 每 次 调用 animate 方法 时 的 第 一 个 参数 给 出 1 分 钟 后 
指针 的 位 置 ， 秒 针 旋转 360 度 ， 分 钟 旋转 6 度 ， 时 钟 旋转 0.5 度 。 第 二 个 参数 表示 动画 
时 长 为 60 000 毫秒 (1 分钟 )， 第 三 个 参数 表示 动画 为 匀速 (linear) 运动 。 

@ 1 分 钟 过 寸 后 ， 最 后 一 个 动画 中 指定 的 回调 参数 updateClock 会 被 调用 ， 使 动画 再 次 开始 。 

这 会 使 得 时 钟 再 次 与 系统 时 钟 同 步 ， 并 开始 下 一 分 钟 的 动画 。 注 意 三 个 动画 中 只 需要 
个 指定 回调 函数 即 可 ， 因 为 调用 updateClock 会 使 三 个 动画 都 开始 运动 。 



































你 可 以 在 线 观看 真实 的 时 钟 : 


http://oreillymedia.github.io/svg-essentials-examples/chl4/snap_animated_clock.svg 





14.6 Snap 中 的 事件 处 理 














使 用 像 Snap 这 样 的 库 也 可 以 使 得 事件 处 理 更 容易 。 下 面 的 例子 很 简单 ， 
面 中 使 用 Snap， 在 页 面 上 显示 一 个 圆 和 一 个 按钮 。 ny 点 击 按钮 会 使 加 








中 间 。 


你 需要 使 用 的 Snap 函数 主要 是 Snap()、click() 和 drag()。Snap() 函数 接受 


它 在 HTML 页 





回 到 


一 个 #idName 


字符 串 ， 并 返回 代表 对 应 元 素 的 包 庄 对 象 。 一 旦 你 拿 到 这 个 对 象 ， 就 可 以 使 用 click() 和 





drag() 方法 来 让 元 素 响 应 对 应 的 事件 。 
示例 14-7 展示 了 需要 的 HTML 。 


示例 14-7: Snap 事件 示例 的 HTML 
<htmL xml:lang="en" lang="en" 
xmlns="http://www.w3.o0rg/1999/xhtml"> 


<head> 
<title>Click and Drag Events in Snap</title> 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 


<script type="text/javascript" src="snap.svg-min.js"></script> 


<script type="text/javascript"> 
function init() { 
} 
</script> 
</head> 


<body onload="init()"> 
<hi>Click and Drag Events in Snap</h1> 


<div style="text-align:center"> 
<svg width="200" height="200" viewBox="0 0 200 200" 
xmlns="http://www.w3.0rg/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink"> 


<circle id="circle" cx="100" cy="100" r="30" 
style="fill:#663399; stroke: black"/> 


<rect id="button" x="60" y="170" 
rx="5" ry="5" width="80" height="25" 
style="stroke:black; fill:#ddd; cursor:pointer"/> 
<text id="buttonText" x="100" y="187" class="buttonText" 
style="fill:black; stroke:none; 
font-family: sans-serif; font-size: 12pt; 
text-anchor:middle; cursor:pointer">Reset</text> 
</svg> 
</div> 
</body> 
</htmL> 
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14.6.1 点 击 对 象 


要 设置 一 个 点 击 处 理 方法 的 话 ， 需 要 调用 Snap 对 象 的 click() 方法 ， 并 传人 用 于 处 理 点 击 
事件 的 函数 名 。 下 面 是 用 于 处 理 按钮 以 及 按钮 内 文本 的 点 击 的 代码 : 









































function init() { 
Snap("#button").click(resetFcn); 
Snap("#buttonText").click(resetFcn); 


function resetFcn(evt) { 
Snap("#circle").attr({cx: 100, cy: 100}); 
} 


处 理 函数 的 参数 是 触发 事件 ， 但 在 这 个 例子 中 ，resetFcn() 不 需要 使 用 它 。 到 目前 为 止 ， 


如 果 你 使 用 这 些 代码 ， 没 有 任何 效果 ， 因 为 圆 已 经 在 中 间 了 。 你 可 以 试 着 改变 cx 或 者 cy 
的 值 ， 看 看 处 理 函数 是 否 正确 工作 了 。 


14.6.2 ” 拖 搜 对 和 象 

按钮 已 经 处 理 完了 ， 现 在 我 们 为 圆 添 加 拖 搜 处 理 。drag() 方法 接受 三 个 参数 : 用 于 处 理 
移动 事件 的 函数 名 称 ， 用 于 处 理 拖 动 开始 事件 的 函数 名 称 ， 以 及 用 于 处 理 放下 事件 的 函数 
名 称 。 


拖 动 开始 的 函数 接受 三 个 参数 : 起 始 x 位 置 、 起 始 y 位 置 ， 以 及 触发 开始 事件 的 DOM 事 
件 对 象 。 

放下 事件 接受 一 个 参数 : 放下 时 的 事件 对 象 。 

移动 事件 处 理 函 数 接受 5 个 参数 : 

。 dx， 与 起 始点 的 x 方向 上 的 昌 
。 dy， 与 起 始点 的 y 方 向 上 的 
。 x， 鼠 标的 x 位 置 

。 y， 鼠 标的 位 置 

。 event， 鼠 标 移动 的 DOM 事件 对 象 


你 需要 记 住 圆 的 起 始 位 置 为 : 
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var startX = 100; 
Var startY = 100; 








下 面 是 你 需要 添加 到 init() 中 的 代码 ， 用 于 处 理 圆 的 拖 搜 事件 : 


Snap('#circle').drag(dragMove, dragStart, dragEnd); 





下 面 是 这 些 函 数 (以 逻辑 顺序 开始 、 移 动 、 结 束 ) : 


function dragStart(x, y, evt) { 
// 找 出 圆 的 当前 位 置 
startX = parseInt(Snap("#circle").attr("cx"), 10); 
startY = parseInt(Snap("#circle").attr("cy"), 10); 


} 





function dragMove(dx, dy, x, y, evt) { 
Snap("#circle").attr({cx: (startX + dx), cy: (startY + dy)}); 
} 
function dragEnd(evt) { 
// 不 需要 做 什么 
} 


结果 见 图 14-3， 为 了 市 省 版 面 做 了 一 定 修改 。 
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使 用 Snap 的 点 击 和 拖 搜 事件 




















14-3: 拖 搜 圆 的 截屏 
你 可 以 在 线 上 版 本 中 亲自 进行 点 击 和 拖 动 : 





http://oreillymedia.github.io/svg-essentials-examples/chl4/snap_events.html 








这 些 例子 只 是 你 能 用 Snap 库 做 的 事情 中 的 很 小 一 部 分 。 更 复杂 的 例子 可 以 访问 它 的 


网 


查看 demo。D3、Snap 和 Raphaél 并 不 是 仅 有 的 选择 ， 但 它们 都 有 一 个 共同 点 : 使 得 使 用 


JavaScript 动态 创建 和 维护 SVG 更 容易 。 
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第 15 章 


生成 SVG 





前 面 几 章 已 经 介绍 了 SVG 的 主要 特性 。 所 有 的 示例 都 比较 简单 ， 都 是 使 用 非常 原始 的 文 
本 编辑 器 编写 的 。 对 于 比较 复杂 的 图 形 ， 极 少 有 人 从 头 开始 编写 SVG。 事实 上 几乎 没有 人 
手工 编写 SVG。 图 形 设计 师 通常 会 使 用 某 些 图 形 软件 来 生成 SVG， 而 程序 员 则 使 用 脚本 
将 原始 数据 转换 为 SVG。 


如 果 你 需要 处 理 的 图 形 已 经 是 图 形 处 理 程 序 输 出 的 SVG 格式 ， 那 么 几乎 就 没什么 额外 的 
工作 了 。 如 果 你 读 过 图 形 软件 生成 的 SVG 代码 ， 会 发 现 非常 难 读 。 一 些 程序 并 不 会 优化 
SVG 文件 ， 比 如 使 用 分 组 〈<9> 元素) 或 者 优化 路 径 。 如 果 你 使 用 这 些 程序 ， 那 么 轻松 生 
成 SVG 的 代价 就 是 失去 完全 手工 编写 时 全 盘 掌 控 的 能 力 。 好 在 如 果 你 能 理解 其 中 的 原理 ， 
就 仍然 可 以 编写 出 能 操作 图 形 程序 输出 SVG 代码 的 程序 。 


从 数据 文件 生成 SVG 是 一 个 很 麻烦 的 主题 。 其 中 的 各 种 可 能 性 取决 于 你 手 上 的 数据 类 型 
和 你 能 使 用 的 编程 语言 类 型 。 


生成 SVG 的 一 种 方法 是 使 用 第 14 章 介绍 的 方法 生成 SVG 文档 对 象 模 型 (DOM) 。 我 们 在 
14.5 节 中 提 到 过 D3.js， 它 是 专门 为 在 Web 浏览 器 中 使 用 数据 文件 动态 构建 SVG 图 形 而 设 
计 的 。Scott Murray 的 Interactive Data Visualization for the Web (OReilly) 很 适合 入 门 者 阅 
读 。 这 个 库 的 原作 者 Mike Bostock 和 其 他 在 项 目 wiki 页 (https://github.com/mbostock/d3/ 
wiki/Tutorials) 中 列 出 来 的 人 ， 也 有 很 多 非常 不 错 的 教程 。 


另 一 种 动态 生成 SVG 的 方法 是 将 一 些 SVG 代码 片段 连 在 一 起 ， 然 后 使 用 你 喜爱 的 编程 语 
言 将 它们 写成 文件 。 本 章 第 一 部 分 会 概述 如 何 使 用 自己 编写 的 程序 将 非 XML 格式 的 地 理 
信息 文件 转换 为 SVG 文件 。 
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如 果 你 的 数据 已 经 是 XML 格式 ， 你 可 能 只 需要 将 相关 的 数据 提取 出 来 ， 然 后 塞 进 SVG 
文件 框架 中 即 可 。 这 种 情况 下 ， 你 可 以 使 用 实现 了 XSLT (Extensible Stylesheet Language 
Transformations， 可 扩展 样式 表 转 换 语言 ) 的 工具 。XSLT 是 一 种 使 用 XML 语法 来 定义 如 
何 将 一 个 XML 文件 转换 为 另 一 个 XML 文件 的 方法 。 本 章 第 二 部 分 展示 了 如 何 使 用 XSLT 
将 XML 格式 的 航空 天 气 报告 转换 为 SVG。 


15.1 将 自 定 义 数 据 转换 为 SVG 


如 果 说 有 谁 的 生活 一 直 在 和 图 形 打交道 的 话 ， 那 一 定 是 地 图 绘制 员 。 他 们 通常 会 希望 得 到 
XML 标记 数据 ， 而 SVG 是 将 这 些 数据 变 为 可 移植 格式 的 一 种 非常 好 的 方式 。 然 而 在 现 阶 
段 ,仍然 有 非常 多 的 数据 是 以 自 定义 格式 或 者 专 有 格式 存储 的 。 


其 中 一 种 专 有 格式 是 由 美国 环境 系统 研究 所 公司 (Environmental Systems Research 
Institute) 开发 的 ， 被 用 于 ArcInfo GIS (Geographic Information System， 地 理 信息 系统 )。 
这 个 系统 创建 的 数据 可 以 以 ASCII 格式 导出 。 导 出 的 文件 包含 一 系列 描述 多 边 形 的 数据 ， 
并 以 一 行 只 有 END 的 文本 结束 。 每 个 多 边 形 的 第 一 行 由 一 个 整形 数字 标识 (ID) 和 一 个 顶 
点 的 x/y 坐标 组 成 。 接 下 来 的 每 一 行 代表 多 边 形 的 一 个 顶点 。 含 END 的 行 表示 多 边 形 描述 
结束 。 下 面 是 一 个 示例 文件 : 





























于 -0.122432044171565E+03 0.378635608621089E+02 
-0.122418712172884E+03 0.378527169597E+02 
-0.122434402770255E+03 0.378524342437443E+02 
-0.122443301934511E+03 0.378554484803880E+02 
-0.122446316168374E+03 0.378610463416856E+02 
-0.122438565286068E+03 0.378683666259093E+02 
-0.122418712172884E+03 0.378527169591107E+02 

END 

2 -122.36 37.82 
-122.378 37.826 
-122;377 373831 
“122.370 37..5832 
-122.378 378.826 

END 
END 





要 将 这 样 的 文件 转换 为 SVG， 只 需要 简单 地 将 坐标 插入 到 <polygon> 元 素 的 points 属性 
中 即 可 。 唯 一 需要 注意 的 是 ，ARC/INFO 以 第 卡 儿 坐标 系 保存 数据 ， 所 以 我 们 需要 将 y 
坐标 翻转 一 下 。 我 们 即将 讲 到 的 程序 接受 两 个 参数 : 输入 文件 名 和 输出 SVG 图 形 的 宽度 
(像素 ) 。 


除了 这 些 参数 外 ， 我 们 还 需要 一 些 额外 的 全 局 变量 来 处 理 数据 。 


。 LineBuffer 数组 ， 用 于 保存 每 一 行 按 空 格 分 隔 后 的 单词 或 者 数字 ， 
。 singlePolygon 当前 多 边 形 的 坐标 数组 ， 
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polygonList 所 有 多 边 形 的 points 字符 串 数 组 ， 


。 minX/minY/maxX/maxY 当前 已 经 读 取 过 的 坐标 中 的 极 值 。 最 小 值 在 初始 化 的 时 候 应 该 取 正 


无 穷 (或 者 当前 编程 语言 中 允许 的 最 大 值 ) ,最 大 值 在 初始 化 的 时 候 应 该 取 负 无 穷 。 这 样 ， 
任何 数 跟 它 们 比较 的 时 候 都 能 变 成 新 的 最 大 /最 小 值 。 














下 面 的 算法 假设 你 有 办 法 以 行为 单位 读 取 输 入 文件 ， 并 将 结果 放 到 输出 流 或 者 文件 中 。 具 
体 的 做 法 取决 于 编程 语言 ， 但 基本 上 每 种 编程 语言 都 可 以 做 到 这 两 件 事 。 


(1) 


(2) 





创建 一 个 程序 ， 一 次 从 输入 文件 中 取 一 个 口令 '。 





function get_token() 
{ 
if ( lineBuffer is empty) // 没有 数据 了 ? 
{ 





从 输入 文件 中 读 取 下 一 行 ; 
除 首尾 空白 ; 

从 空白 处 分 割 得 到 口令 数组 ; 

放 入 UlineBuffer; 





























} 
从 LineBuffer 中 移 除 第 一 个 ,并 返回 它 
} 


主 程序 (在 验证 和 存储 输入 参数 并 初始 化 其 他 变量 之 后 ) 使 用 和 骨 套 循环 处 理 数 据 文 
件 。 外 层 循 环 处 理 每 个 多 边 形 的 开始 和 结束 ， 内 层 循 环 处 理 坐 标 对 。 每 个 多 边 形 
都 以 一 个 索引 数字 开头 ， 以 END 结尾 。 整 个 文件 也 以 END 结尾 。 读 取 索 引 数 字 ， 将 
singlePolygon 初始 化 为 一 个 坐标 数组 ， 然 后 读 取 坐标 ， 直 到 过 到 END， 将 坐标 对 放 入 
坐标 数组 polygonList。 重 复 这 个 过 程 ， 直 到 下 一 个 口令 也 是 END。 





























Sa 








open input-file; 
while((polygonNumber = get_token()) is not "END") 
singlePolygon = 空 列表 ; 


while((xCoord = get_token()) is not "END") 
{ 

yCoord = get_token(); 

append (xCoord, yCoord) to singlePolygon; 


// 记录 最 小 /最 大 坐标 值 
minX = min(xCoord, minX); 
maxX = max(xCoord, maxX); 
minY = min(yCoord, minY); 
maxY = max(yCoord, maxX); 
} 
append signlePolygon to polygonList; 
} 





即 上 文 说 的 以 空白 分 隔 的 单词 或 者 数字 。 一 一 译 者 注 


注 1: 











close input-file; 





(3) 处 理 完 输入 文件 后 


，PolygonList 是 一 个 含有 坐标 对 数组 的 数组 ，minX/minY/maxX/maxY 


保存 着 坐标 值 的 最 大 /最 小 值 。 但 在 开始 构建 SVG 之 前 ， pa trl 个 合适 的 缩 

















放 比 例 ， 以 使 数据 的 x 坐标 范围 和 用 户 输入 的 宽度 相 匹 配 。 通 过 初始 化 一 些 其 他 的 变量 
来 处 理 输入 和 输出 坐标 : 








deltaX 
deLtaY 














maxX - minX; 
maxY - minY; 


scale = width / deLtaX; 


height 
height 


(4) SVG 文件 本 身 通 





open output; 


deLtaY * scale; 
int(height + 0.5); // 向 上 取 整 





过 输出 标记 到 文件 的 方式 完成 ， 将 从 数据 中 提取 的 坐标 值 代入 : 


print the following to output, replacing variables in {} 


with their values: 


<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG1.1//EN" 
"http://www.w3.o0org/Graphics/SVG/1.1/DTD/svg11.dtd"> 


<svg width=" {width}" height=" {height}" 
viewBox="0 0 {deltaX} {deltaY}"> 
XxmLns="http://www.w3.org/2000/svg"> 

<title>Map constructed from {input-file} </title> 


<g style="fill: 


none; stroke: black;"> 


(5) 处 理 数 据 数 组 ， 生 成 多 边 形 对 象 : 


polygonNumber = 1 


foreach singlePolygon in polygonList 


{ 


print '<polyline id="poly {polygonNumber}" points=" '; 
从 singlePolygon 中 移 除 第 一 对 坐标 ; 


n = 0; // 坐标 索引 


foreach coordinate in singLePoLygon 


{ 





if (n % 2 == 1) // ;坐标 


{ 


coordinate = (maxY - coordinate); // 翻转 ?坐标 


} 


else 


{ 


coordinate = (coordinate - minX); 





} 





} 
输出 坐标 ,后 面 带 一 个 空格 ; 
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// 为 了 避免 一 行 太 长 ,每 行 上 只 输出 8 个 坐标 值 
n= (n+1)%8; 
if (n == 0) { print a newline } 


} 
print ' /> '; // 关 闭 多 边 形 
poLygonNumber++; 


(6) 关闭 标签 ， 关 闭 文 件 : 


print ' </g>\n</svg>\n'; 

close output; 
这 段 用 伪 代 码 写 的 程序 是 一 个 真实 的 Perl 程序 的 简化 版 。 以 美国 密歇根 州 的 数据 和 250 像 
素 的 宽度 运行 这 个 Perl 程序 会 得 到 图 15-1。 之 所 以 选择 密歇根 州 是 因为 有 好 几 个 多 边 形 要 
画 ， 而 且 它 的 轮廓 比 其 他 州 〈 比 如 卡罗拉 多 州 ) 要 有 趣 一 些 。 数 据 来 自 US Census Bureau 
Cartographic Boundary Files 网 站 。 











CE 


图 15-1: 由 ARC/INFO 转换 为 SVG 


15.2 ”使 用 XSLT 将 XML 数据 转换 为 SVG 


如 果 你 的 数据 文件 是 XML 格式 的 ,那么 XSLT 可 能 是 将 它 转 为 SVG 的 最 佳 选 择 。 














15.2.1 定义 任务 

本 示例 使 用 XSLT 从 一 个 XML 文件 中 提取 信息 并 放置 到 SVG 文件 中 。 源 数据 是 来 自 
http://w1.weather.gov/xml/current_obs/NNNN.xml 的 天 气 数据 ， 其 中 的 NNNN 是 天 气 观测 
站 的 标识 。 它 的 格式 是 由 国家 海洋 和 大 气 组 织 定义 (http://www.nws.noaa.gov/view/current_ 
observation.xsd) 的 OMF (Observation Markup Format， 观 测 标记 格式 ) 文档 。 下 面 是 来 自 
KSJC 观测 站 的 样本 数据 (为 了 避免 数据 过 长 ， 进 行 了 编辑 ) : 

















<current_observation version="1.0"> 
<credit>NOAA's National Weather Service</credit> 
<credit_URL>http://weather .gov/</credit_URL> 
<location>San Jose International Airport, CA</location> 





我 们 需要 从 报告 中 提取 出 工作 站 、 日 期 和 时 间 、 温 度 、 风 速 风向 以 及 能 见 度 ， 然 后 将 数据 


<station_id>KSJC</station_id> 

<latitude>37.37</latitude> 

<Longitude>-121.93</Longitude> 

<observation_time>Last Updated on Jul 15 2014, 7:53 am PDT 
</observation_time> 

<observation_time_rfc822>Tue, 15 Jul 2014 07:53:00 -0700 
</observation_time_rfc822> 

<weather>0vercast</weather> 

<temperature_string>62.0 F (16.7 C)</temperature_string> 

<temp_f>62.0</temp_f> 

<temp_c>16.7</temp_c> 

<wind_string>West at 5.8 MPH (5 KT)</wind_string> 

<wind_dir>West</wind_dir> 

<wind_degrees>290</wind_degrees> 

<wind_mph>5.8</wind_mph> 

<visibility mi>10.00</visibility_mi> 


<copyright_url>http://weather .gov/disclaimer.html</copyright_url> 


</current_observation> 





填充 到 如 图 15-2 所 示 的 图 表 模 板 中 。 

















观测 站 名 称 日 期 


50 .120 (OD™ 


N 


0| |32 
WwW E 
c F 和 0 10 20 30 40+ 
温度 风向 能 见 度 ( 千 米 ) 





15-2: 天 气 图 表 模 板 
我 们 感 兴趣 的 和 最 终 要 显示 在 图 表 中 的 数据 如 下 。 














<observation time_rfc822> 


在 图 表 中 ， 日 期 和 时 间 会 以 文本 显示 ， 同 时 时 间 还 会 显示 在 模拟 时 钟 上 。 在 早 6 点 到 晚 





6 点 期 间 ， 表 盘 颜色 是 浅黄 色 ， 夜 间 时 间 则 是 浅 蓝 色 。 


<station_id> 


报告 数据 的 观测 站 标识 。 





| 








表 上 会 以 文本 显示 。 


<temp_c> 











摄氏 温度 。 温 度 计 上 的 颜色 会 根据 气温 来 展示 ， 如 果 气 温 高 于 0 度 ， 则 显示 为 红色 ;如 

















果 小 于 等 于 0 度 ， 则 显示 为 蓝 色 。 


<wind_degrees> 


以 角度 表示 的 风向 。0 表示 风向 为 正 北方 ，270 度 表示 正 西 方 。 会 以 指南 针 的 指针 展示 。 
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。 <Wind_mph> 


风速 ， 单 位 为 英里 / 小时， 会 转换 为 米 / 秒 。 


。 <wind gust_mph> 


阵风 速度 ， 单 位 也 是 英里 /小 时 ， 也 会 被 转换 为 米 / 秒 。 


。 <visibility_mi> 
能 见 度 ， 单 位 为 英里 ， 将 被 转换 为 千 米 。 最 后 在 图 表 上 会 显示 在 水 平 的 条 状 图 表 中 。 超 
过 40 千 米 的 能 见 度 会 被 认为 是 无 穷 远 。 











15.2.2 XSLT 的 工作 方式 

为 了 将 OMF 源 文件 转换 为 SVG 格式 ， 我 们 需要 创建 一 份 说 明文 档 来 说 明 OMEF 文件 中 的 
哪些 元 素 和 属性 是 我 们 感 兴 趣 的 。 说 明文 档 还 要 详细 说 明 当 处 理 器 碰 到 感 兴趣 的 元 素 和 属 
性 时 要 怎么 生成 SVG 元 素 。 如 果 你 是 让 另外 一 个 人 手工 进行 这 个 转换 ， 可 以 用 自然 语言 





编写 一 份 描述 。 

















(1) 以 以 下 内 容 开始 一 份 SVG 文档 : 


<!DOCTYPE svg PUBLIC "-//W3C/DTD SVG 1.0//EN", 


"http://www 


(2) 遍历 整个 源 文档 ， 对 每 个 元 素 都 按 处 理 说 明 进行 处 理 。 














(3) 处 理 <curren 








.Ww3.0rg/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 








t_observation> 元 素 时 ， 在 SVG 文档 中 添加 以 下 代码 ， 然 后 按 注 释 中 的 


说 明 处 理子 元 素 ; 


<svg ViewBox="0 0 350 200" height="200" width="350"> 


<!-- 处 到 


</svg> 





有 <current_observation> 的 子 元 素 --> 


(4) 处 理 <station_id> 元 素 时 ， 在 SVG 文档 中 添加 以 下 代码 ， 然 后 将 内 容 填充 上 : 





<text font-size="10pt" x="10" y="20"> 
<!-- 填充 元 素 内 容 --> 


</text> 


(5) 按照 “如 何 画 温度 计 ” 中 的 说 明 处 理 <temp_c> 元 素 。 





(6) 按照 “如 何 画 风向 指南 针 ” 中 的 说 明 处 理 <wind_dir> 元 素 。 








类 似 地 ， 对 其 他 的 元 素 ， 也 需要 指出 处 理 时 的 说 明 在 哪里 ， 然 后 在 那里 给 出 类 似 如 下 的 


说 明 。 
。 如 何 画 温度 计 





一 计算 高 度 值 ， 方 法 为 50 减 去 温度 值 。 
一 以 温度 值 是 否 高 于 0 来 决定 使 用 什么 颜色 (红色 还 是 蓝 色 )。 
- 将 高 度 和 颜色 值 放 入 下 方 斜体 显示 的 地 方 : 
<path 
d= "M25 height 25 90 
A1010010 35 90 
L 35 height Z" 
style="stroke: none; fill: color;"/> 
<path 
d="M2502590A10100103590L35072" 
style="stroke: black; fill: none;"/> 


对 “如 何 画 风向 指南 针 ” 以 及 其 他 的 元 素 ， 也 应 该 有 这 样 详细 的 说 明 。 


这 份 说 明 不 是 用 自然 语言 编写 ， 也 不 是 由 人 类 来 完成 转换 ， 而 是 需要 以 XSLT 标记 格式 来 
编写 。 然 后 可 以 将 XSLT 和 XML 文件 一 起 交 给 XLST 处 理 器 ， 然 后 就 会 生成 SVG 文档 中 
对 应 的 元 素 ， 并 将 对 应 的 值 填 好 。 





下 面 是 一 份 自然 语言 和 XSLT 的 对 应 表格 。 














自然 语言 区 Sn 

以 指定 类 型 创建 输出 文档 <xsl:output method="xml" 
doctype-public="..." doctype-system="..."> 

输出 一 个 元 素 <xsl:template match="element"> 


<!-- 需要 输出 的 元 素 --> 
</xsl:template> 


处 理 当 前 元 素 包 含 的 任何 items 子 元 素 <xsl:apply-templates select="items"> 
将 iten 的 值 填充 到 目标 文档 <xsl:value-of select="item"> 
将 iten 的 值 放 到 变量 var 














a 





<xsl:variable name="var"> 

<!-- 使 用 item 的 值 --> 
</xsl:variable> 
调用 另 一 个 模板 some-name， 并 传递 参数 <xsl:call-template name="some-name"> 
some-value <xsl:with-param name="parameter" 

select="some-value'"/> 
</xsl:call-template> 

如 果 测 试 结果 为 真 ， 则 使 用 以 下 内 容 <xsl:if test="some-test"> 


<!-- 内 容 --> 











</xsl:tf> 
如 果 测 试 结果 显 真 ， 则 使 用 一 段 内 容 ， 否 <xsl:choose> 
则 使 用 另外 的 内 容 <xsl:when test="some-test"> 





<!-- 内 容 --> 
</xsl:when> 
<xsl:otherwise> 
<!-- 另外 的 内 容 --> 
</xsl:otherwise> 
</xsl:choose> 
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15.2.3 编写 XSL 样 式 表 
我 们 会 在 编写 的 时 候 加 上 一 些 详细 说 明 ， 这 对 于 入 门 已 经 足够 了 。XSLT 文件 的 开头 类 似 
这 样 ， 在 本 例 中 ， 文 件 名 为 weather .xsl: 





<XSL:StyLesheet version="1.0" 
xmLns:XxsL="http://www.w3.org/1999/XSL/Transform'" 
xmlns:xlink="http://www.w3.org/1999/xlink" 
xmlns="http://www.w3.0rg/2000/svg"> 


<xsl:output method="xml" indent="yes" 
doctype-public="-//W3C/DTD SVG 1.0//EN" 
doctype-system="http://www.w3.org/Graphics/SVG/1.1/DTD/svgii.dtd"/> © 


<XSL:tempLate match="current_observation"> © 
<svg width="350" height="200" viewBox="0 0 350 200" 
xmlns="http://www.w3.0rg/2000/svg"> 
<g style="font-family: sans-serif"> 





<!-- 处 理 所 有 子 元 素 --> 
<XSL:appLy-tempLates /> © 
</g> 

</svg> 

</xsl:template> 


@ <xsl:output> 表示 输出 为 XML 文件 ， 并 应 该 正确 缩 进 。 同 时 它 也 指定 了 <!DOCTYPE .> 
说 明 。 

@@ <xsl:template> 表示 碰 到 <current_observation> 元 素 时 输出 指定 内 容 。 内 容 只 会 输出 
一 次 ， 因 为 在 源 文档 中 只 有 一 个 这 样 的 元 素 。 它 创建 了 最 外 层 的 <svg>， 并 创建 了 一 个 
后 面 会 用 到 的 <g> 元 素 。 

@ 在 输出 <svg> 和 <g> 之 后 ，<xsl:apply-templates> 表示 处 理子 元 素 ， 并 应 用 对 应 的 
<xsl:template> 元 素 。 



































下 面 是 处 理 station_id 元 素 的 标记 ; 


<XSL:tempLate match="station_id"> 
<text font-size="10pt" x="10" y="20"> 
<xsl:value-of select="."/> 
</text> 
</xsl:template> 


<xsl:value-of> 将 指定 元 素 的 值 插入 到 当前 位 置 。 在 这 个 例子 中 ，. 表示 “当前 元 素 ”。 





到 目前 为 止 ， 示例 中 都 使 用 元 素 名 作为 match 和 select 的 值 。 事实 上 ， 你 
可 以 使 用 任何 XPath 表达 式 作为 值 。XPath 是 一 种 可 以 精准 选择 XML 中 一 
部 分 元 素 的 语法 。 比 如 在 处 理 XHTML 文档 时 ， 你 可 选择 在 <tr> 中 的 第 奇 
数 个 且 拥 有 title 属性 的 <td> 元 素 。 


hl 

















在 一 个 <xsl:template> 中 输出 所 有 SVG 相关 的 内 容 是 可 能 的 ， 但 将 内 容 分 成 不 同 的 模块 
则 更 容易 阅读 和 维护 。XSLT 允许 你 创建 一 些 像 函 数 一 样 的 模板 ， 它 们 不 对 应 源 文档 中 的 
任何 元 素 ， 但 你 可 以 使 用 模板 名 称 显 式 调 用 并 传 和 人 参数。 下面 是 画 温 度 计 的 代码 : 
<XSL:tempLate match="temp_c"> 
<xsl:call-template name="draw-thermometer "> 
<xsl:with-param Name="t" select="."/> 


</xsl:call-template> 
</xsl:template> 


如 果 参 数值 是 元 素 的 属性 值 或 者 内 容 ， 那 么 设 定 参 数 最 方便 的 方法 是 使 用 setect， 男 一 种 
设 定 值 的 方式 是 将 内 容 放 在 起 始 标记 和 结束 标记 之 间 。 


现在 你 可 以 编写 模板 draw-thermometer 了 。 传 进来 的 参数 会 决定 温度 计 的 高 度 以 及 使 用 红 
色 还 是 蓝 色 填充 。 我 们 分 阶段 来 完成 这 个 示例 。 首 先 提取 出 参数 并 画 出 静态 部 分 : 

















<xsl:template name="draw-thermometer"> 
<xsl:param Name="t" select="0"/> 
<g id="thermometer" transform="translate(10, 40)"> 
<path id="thermometer-path" stroke="black" fill="none" 
d= "M2502590A10100103590L35072"/> 


<g id="thermometer-text" font-size="8pt" font-family="sans-serif"> 
<text x="20" y="95" text-anchor="end">-40</text> 
<text x="20" y="55" text-anchor="end">0</text> 
<text x="20" y="5" text-anchor="end">50</text> 
<text x="10" y="110" text-anchor="end">C</text> 
<text x="40" y="95">-40</text> 
<text x="40" y="55">32</text> 
<text x="40" y="5">120</text> 
<text x="50" y="110">F</text> 
<text x="30" y="130" text-anchor="middle">Temp.</text> 
</g> 
</g> 
</xsl:template> 


<xsl:param> 元 素 可 以 让 你 指定 一 个 默认 值 〈 这 里 为 9) ， 如 果 没 有 参数 传 信 ， 会 使 用 默认 值 。 


接 下 来 ,添加 下 面 的 代码 ， 让 温度 以 文字 显示 出 来 。 如 果 没 有 温度 值 ， 则 显示 N/A。 需 要 
注意 的 是 ， 参 数 名 字 为 t， 但 是 如 果 要 引用 它 的 内 容 ， 必 须 写 成 5st。 将 下 面 这 段 代码 放 到 


<g id="thermometer-text"> 中 : 




















<text x="30" y="145" text-anchor="middle"> 
<xsl:choose> 
<xsl:when test="$t != ''"> 
<xsl:value-of select="round($t)"/>8&#176;C / 
<xsl:value-of select="round($t div 5 * 9 + 32)"/>&#176;F 
</xsl:when> 
<xsl:otherwise>N/A</xsl:otherwise> 
</xsl:choose> 
</text> 
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文本 内 容 由 <xsl:choose> 元 素 根据 条 件 选 择 ， 它 包含 一 个 或 多 个 <xsL:when> 元 素 。test 为 
真 的 第 一 个 元 素 会 输出 到 文档 中 。 如 果 所 有 的 test 都 不 为 真 ， 则 会 使 用 <xsl:otherwise> 
元 素 指 定 的 内 容 。 


在 摄氏 转 华氏 的 过 程 中 ， 使 用 div 来 做 除法 ， 这 是 因为 斜 杠 / 已 经 在 XPath 
中 被 用 来 区 分 元 素 舱 套 的 层级 。 











接 下 来 需要 填充 温度 计 。 只 有 在 t 不 为 空 字符 串 时 才 需 要 填充 。 下 面 的 代码 使 用 
<xsl:variable> 来 创建 一 个 名 为 tint 的 变量 ， 并 将 它 的 值 设 为 red 或 者 blue， 具体 取 
决 于 温度 是 否 大 于 摄氏 0 度 。XSL 中 的 变量 只 能 被 赋值 一 次 。 每 次 模板 被 调用 的 时 候 ， 
变量 会 被 设 为 初始 值 ， 但 是 在 后 续 过 程 中 ， 变 量 值 不 能 被 再 次 变更 。 将 以 下 代码 放 到 
thermometer-text 组 的 结束 标记 </g> 之 后 : 




















<xsl:if test="$t != ''"> 
<xsl:variable name="tint"> 
<xsl:choose> 


<xsl:when test="$t &gt; 0">red</xsL:when> 
<xsl:otherwise>blue</xsl:otherwise> 
</xsl:choose> 
</xsl:variable> 
<!-- 剩 下 的 代码 --> 


</xsl:if> 
这 段 代 码 中 给 变量 赋值 的 部 分 再 次 使 用 了 <xsl:choose>。test 使 用 了 实体 引用 &gt; 表示 


大 于 号 ， 以 避免 XSLT 处 理 器 在 处 理 时 出 现 问 题 。 如 果 你 需要 使 用 小 于 符号 ， 需 要 写成 
&lt;, 


























下 面 是 填充 温度 计 剩 下 部 分 的 代码 : 


<!-- 填充 温度 计 的 过 程 是 画 一 个 实心 的 矩形 
然后 裁剪 到 需要 填充 的 形状 - -> 
<xsl:variable name="h"> 
<xsl:choose> 
<xsl:when test="$t &Lt; -55"> 
<xsl:value-of select="105"/> 
</xsl:when> 
<xsl:when test="$t &gt; 50"> 
<xsl:value-of select="0"/> 
</xsl:when> 
<xsl:otherwise> 
<xsl:value-of select="50 - $t"/> 
</xsl:otherwise> 
</xsl:choose> 
</xsl:variable> 


<clippath id="thermoclip"> 





<use xlink:href="#thermometer-path"/> 
</clipPath> 
<path d="M 10 {$h} h40 V 120 h-40 Z" 
fill="{$tint}" clip-path="url(#thermoclip)"/> 


上 面 代 码 中 的 <xsl:choose> 有 两 个 <xsl:when> 子 句 ， 它 们 限制 了 “水 银 柱 ” 的 高 度 ， 以 
防止 温度 超过 温度 计 范 围 时 出 现 异 常 。<xsL:otherwise> 子 句 设置 了 当 温 度 在 温度 计 范 围 内 
时 的 “水 银 柱 ” 高 度 。 








当 我 们 在 输出 文档 的 属性 值 中 使 用 参数 或 者 变量 时 ， 必 须 使 用 大 括号 包 庄 ， 正 如 最 后 的 
<path> 元 素 。 


我 们 可 以 看 一 下 到 现在 为 止 的 转换 成 果 了 。 在 测试 之 前 ， 你 还 需要 添加 一 个 空 模板 来 处 理 
文本 节点 。XSLT 处 理 器 会 内 置 一 些 模板 来 保证 能 遍历 到 源 文档 中 的 所 有 元 素 和 文本 。 默 
认 的 行为 是 将 元 素 中 的 文本 直接 放 到 目标 文档 中 。 在 我 们 的 示例 中 ， 希望 将 不 需要 处 理 的 
文本 扔 掉 ， 所 以 需要 一 个 空白 模板 来 处 理 文本 节点 ， 保 证 它们 不 出 现在 SVG 文件 中 。 
后 你 需要 关闭 </xsl:stylesheet> 标记 : 


























<xsl:template match="text()"/> 


</xsl:stylesheet> 


调用 XSLT 处 理 器 处 理 天 气 数据 XML 文件 后 ， 结 果 见 图 15-3。 图 上 显示 了 气象 观测 站 的 
名 字 和 温度 计 。 如 果 你 没有 独立 的 XSLT 处 理 器 ， 可 以 在 XML 文件 中 加 入 以 下 几 行 








<?xml version="1.0"?> 
<?xml-stylesheet type="text/xsl" href="weather.xsl"?> 


然后 在 浏览 器 中 打开 XML 文件 ， 就 能 看 到 转换 后 的 结果 。 
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15-3: XSL 生成 的 SVG 文件 

















前 面 你 见 过 XSLT 可 以 做 一 些 简单 的 运算 了 ， 其 实 它 还 可 以 做 一 些 字符 串 操 作 。 下 面 是 显 


示 日 期 和 时 间 的 XSLT， 它 使 用 了 substring 函数 来 获取 需要 的 信息 





一 














<xsl:template match="observation_time_rfc822"> 
<xsl:variable name="time" select="."/> O@ 
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<text font-size="10pt" x="345" y="20" text-anchor="end"> 
<xsl:value-of select="substring($time, 6, 11)"/> 名 
</text> 


<xsl:call-template name="draw-time-and-clock"> © 
<xsl:with-param name="hour" 
select="number(substring($time, 18, 2))"/> 
<xsl:with-param name="minute" 
select="number(substring($time, 21, 2))"/> 
</xsl:call-template> 
</xsl:template> 


@ 为 了 方便 ,将 字符 串 存 到 了 一 个 变量 中 ， 避 免 出 现 一 堆 <xsl:value-of>。 

@ substring() 函数 需要 字符 串 、 起 始 位 置 索引 、 截 取 的 字符 数量 。 第 一 个 字符 的 索引 是 1， 
而 不 是 像 很 多 编程 语言 一 样 是 0。 

@ 将 小 时 和 分 钟 的 处 理工 作 传 给 一 个 模板 去 做 。number() 函数 将 字符 串 转 换 成 数字 类 型 。 





ul 














下 面 是 绘制 表盘 并 以 文本 显示 时 间 的 模板 (唯一 的 新 东西 就 是 format-number() 函数 ) : 














<xsl:template name="draw-time-and-clock"> 
<xsl:param name="hour">0</xsl:param> 
<xsl:param name="minute">0</xsl:param> 











<!-- 上 午 6 点 到 下 午 6 点 间 , 表 盘 是 浅黄 色 , 其 他 时 间 是 浅 蓝 色 --> 
<xsl:variable name="tint"> 
<xsl:choose> 
<xsl:when test="$hour &gt;= 6 and S$hour &Lt; 18" 
>#ffffcc</xsl:when> 
<xsl:otherwise>#ccccff</xsl:otherwise> 
</xsl:choose> 
</xsl:variable> 





<!-- 计算 时 针 和 分 针 的 角度 - -> 
<xsl:variable name="hourAngle" 

select="(30 * (Shour mod 12 + Sminute div 60)) - 90"/> 
<xsl:variable name="minuteAngle" 

select="($minute * 6) - 90"/> 


<text font-size="10pt" x="345" y="40" text-anchor="end"> 
<xsl:value-of select="format-number($hour,00)"/> © 
<xsl:text>:</xsl:text> @ 
<xsl:value-of select="format-number($minute,00)"/> 
</text> 
<g id="clock" transform="translate(255, 30)"> 
<circle cx="20" cy="20" r="20" fill="{$tint}" 
stroke="black"/> 
<line transform="rotate({$minuteAngle}, 20, 20)" 
x1="20" yl1="20" x2="38" y2="20" stroke="black"/> 
<line transform="rotate({$hourAngle}, 20, 20)" 
x1="20" y1="20" x2="33" y2="20" stroke="black"/> 
</g> 
</xsl:template> 























@ format-number($hour ,00) 确定 输出 有 两 位 数字 ， 如 果 不 足 会 在 前 面 补 0。 














@@ <xsl:text> 元 素 会 将 它 的 内 容 〈 必 须 是 纯 文 本 ) 一 字 不 差 地 输出 到 文档 中 。 使 用 
<xsl:text> 可 以 避免 空格 问题 。 如 有 果 不 使 用 它 的 话 ， 换 行 符 和 缩 进 会 进入 SVG 的 





<text> 元 素 中 ， 导 致 图 形 中 冒号 周转 产生 多 余 的 空格 。 
下 面 是 绘制 风速 计 的 代码 : 


<xsl:template match="wind_degrees"> 
<xsl:call-template name="draw-wind"> 
<xsl:with-param Nname="dir" select="number(.)"/> 
<xsl:with-param Name="speed" 
select="number(../wind mph) * 1609.344 div 3600" /> © 
<xsl:with-param name="gust" 
select="number(following-sibling::wind gust mph) * 
1609.344 div 3600" /> 
</xsl:call-template> 
</xsl:template> 


<xsl:template name="draw-wind"> 
<xsl:param name="dir">0</xsl:param> 
<xsl:param name="speed">0</xsl:param> 
<xsl:param name="gust">0</xsl:param> 


<g id="compass" font-size="8pt" font-family="sans-serif" 
transform="translate(110, 70)"> 
<circle cx="40" cy="40" r="30" stroke="black" fill="none"/> 
<!-- 风向 标记 --> 
<path stroke="black" fill="none" 
d= "M 40 10 L 40 14 
M 70 40 L 66 40 
M 40 70 L 40 66 
M 10 40 L 14 40"/> 
<xsl:if test="$speed &gt;= 0"> 
<path d="M 40 40 h 25" 
fill="none" stroke="black" 
transform="rotate({$dir - 90},40,40)"/> 四 
</xsl:if> 
<text x="40" y="9" text-anchor="middle">N</text> 
<text x="73" y="44">E</text> 
<text x="40" y="80" text-anchor="middle">S</text> 
<text x="8" y="44" text-anchor="end">W</text> 
<text x="40" y="100" text-anchor="middle">Wind (m/sec)</text> 
<text x="40" y="115" text-anchor="middle"> © 
<xsl:choose> 
<xsl:when test="$speed &gt;= 0"> 
<XSL:VaLue-of select="format-number($speed, 0.)"/> 
</xsL:when> 
<xsl:otherwise>N/A</xsl:otherwise> 
</xsl:choose> 
<xsl:if test="$gust &gt; 0"> 
<xsl:text> - </xsl:text> 
<xsl:value-of select="format-number($gust, 0.)"/> 
</xsl:if> 
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</text> 
</g> 
</xsl:template> 
@ 这 里 是 一 个 复杂 一 点 的 XPath 表达 式 ， 意 思 是 “该 元 素 的 父 元 素 ”， 所 以 /wind_mph 
会 找到 所 有 <wind_degree> 的 父 元 素 包含 的 <wind_mph> 元 素 (在 这 个 XML 文件 中 ， 只 
有 一 个 这 样 的 元 素 )。 获 取 阵 风 (如 果 有 的 话 ) 的 表达 式 则 使 用 了 更 元 长 的 foLLowing- 
sibling:: 语句 。 
@ NOAA 规范 中 规定 正 北 风 是 360 度 ，0 度 代 表 无 风 。 所 以 在 SVG 中 你 需要 将 角度 减 去 
50 度 ， 因 为 在 SVG 中 -90 度 才 代表 “北方 ”。 
四 将 风速 (和 阵风 ) 以 文本 方式 显示 出 来 的 逻辑 即使 在 没有 <wind_mph> 和 <wind_gust_mph> 
元 素 时 也 能 正常 工作 。 当 一 个 不 存在 的 元 素 的 内 容 被 转换 为 数字 时 ， 结 果 是 NaN (Not a 
Number， 非 数字 )。 与 NaN 进行 任何 比较 都 会 返回 false。 这 样 ， 当 没有 <wind_mph> 元 素 
时 ， 结 果 会 显示 WMA， 如果 没 有 <wind_gust_mph> 时 ， 阵 风 面 板 和 数字 不 会 输出 。 



































下 面 是 显示 能 见 度 条 状 图 的 XSLT 代码 。 第 一 个 模板 在 传 入 第 二 个 模板 时 将 能 见 度 转换 为 
千 米 。 条 状 图 宽度 为 100 像素 ， 所 以 当 能 见 度 大 于 40 千 米 时 ， 宽 度 为 100， 否 则 会 按 比 例 
缩小 : 











<xsl:template match="visibility_mi"> 
<xsl:call-template name="draw-visibility"> 
<xsl:with-param Name="v" select="number(.) * 1.609344"/> © 
</xsl:call-template> 
</xsl:template> 


<xsl:template name="draw-visibility"> 
<xsl:param name="V">0</xsl:param> 
<g id="visbar" transform="translate(220,110)" 


font-size="8pt" text-anchor="middle"> 


<!-- 如 果 有 能 见 度 的 值 , 则 填充 和 矩形 --> 
<xsl:if test="$v &gt;= 0"> 
<xsl:variable name="width"> @ 
<xsl:choose> 
<xsl:when test="$v &gt; 40">100</xsL:when> 
<xsl:otherwise> 
<xsl:value-of select="$v * 100.0 div 40.0"/> 
</xsl:otherwise> 
</xsl:choose> 
</xsl:variable> 
<rect style="fill:green; stroke:none;" 
x="0" y="0" width="{$width}" height="20"/> 
</xsl:if> 


<rect x="0" y="Q" width="100" height="20" 
style="stroke:black; fiLL:none" /> 
<path fill="none" stroke="black" 
d="M 25 20 L 25 25 M 50 20 L 50 25 M 75 20 L 75 25"/> 





<text x="0" y="35">0</text> 
<text x="25" y="35">10</text> 
<text x="50" y="35">20</text> 
<text x="75" y="35">30</text> 
<text x="100" y="35">40+</text> 
<text x="50" y="60"> 
Visibility (km) 
</text> 
<text x="50" y="75"> 
<xsl:choose> 
<xsl:when test="$v &gt;= 0"> 
<xsl:value-of select="format-number($v,'0.###')"/> © 
</xsl:when> 
<xsl:otherwise>N/A</xsl:otherwise> 
</xsl:choose> 
</text> 
</g> 
</xsl:template> 


@ 第 一 个 模板 将 能 见 度 转换 为 千里 后 传 给 下 一 个 模板 。 

名 能 见 度 条 状 图 宽度 为 100 像素 ， 能 见 度 高 于 40 千 米 时 设 为 100 像素 ， 低 于 40 千 米 时 按 
比例 缩小 。 

和 格式 化 以 后 会 在 小 数 点 后 输出 3 位 ， 小 数 点 前 会 加 上 0。 


将 这 些 所 有 的 代码 放 到 一 起 ， 结 果 见 图 15-4。 
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15-4; 使 用 XSLT 生成 的 SVG 文件 展示 了 所 有 数据 





这 只 是 XSLT 所 能 做 的 事情 中 一 个 小 小 的 示例 ， 想 要 了 解 更 多 的 话 ， 可 以 参考 Doug Tidwell 
所 著 的 XLT 一 书 (O’ Reilly 出 版 社 )。 这 本 神奇 的 书 在 第 9 章 包含 了 一 个 使 用 XSLT 从 
XML 生成 SVG 文件 的 示例 。 如 果 你 经 党 需要 维护 XML 文件 ， 那 么 建议 你 购买 一 本 。 
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附录 人 


SVG 中 需要 的 XML 知 识 




















本 附录 的 目标 是 介绍 一 下 XML。 如 果 想 直接 编写 SVG 文档 而 不 是 用 某 些 图 形 工具 生成 ， 
了 解 XML 的 相关 知识 是 必要 的 。 








如 果 你 已 经 熟悉 XML， 则 无 需 阅 读本 附录 。 如 果 不 熟 悉 ， 请 继续 阅读 。 本 附录 中 给 出 的 
XML 概述 对 于 处 理 将 要 创建 的 SVG 文档 来 说 应 该 绰绰有余 。 有 关 XML 的 更 多 信息 ，Erik 
T. Ray 编写 的 Learning XML (0O Reilly, http://shop.oreilly.com/product/9780596004200.do) 
以 及 Elliotte Rusty Harold 和 W. Scott Means 合 著 的 XML in a Nutshel (O Reilly，http:// 
shop.oreilly.com/product/9780596007645.do) 都 是 非常 不 错 的 参考 书 。 





注意 ， 本 附录 频繁 引用 的 是 正式 的 XML 1.0 规范 ， 它 所 涵盖 的 主题 超过 了 SVG 的 范 
围 。 我 们 也 可 以 直接 参考 Tim Bray 的 “ 带 注释 的 XML 规范 ” (http://www.xml.com/axml/ 
testaxml.htm)， 它 提供 了 一 个 带 有 启发 性 说 明 的 XML 1.0 规范 ， 也 可 以 参考 Norm Walsh 
的 XML 技术 介绍 (http://www.xml.com/pub/a/98/10/guide0.html)。 











你 可 能 广 意 到 这 些 都 不 是 最 近 的 出 版 物 。 不 要 惊讶 ，XML 是 一 个 固定 的 、 历 史 悠 久 的 
标准 。 











A.1 什么 是 XML 

XML， 可 扩展 标记 语言 ， 是 一 种 互联 网 友好 的 数据 和 文档 格式 ， 由 W3C 发 明 。 标 记 表 
示 一 种 在 文档 内 表达 文档 本 身 结构 的 方式 。XML 源 于 一 门 主要 用 于 发 布 信息 的 、 名 为 
SGML (标准 通用 标记 语言 ) 的 标记 语言 ， XML 和 HTML 都 继承 了 很 多 SGML 的 特性 。 
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XML 用 来 在 Web 上 创建 机 器 可 读 的 文档 ， 而 HTML 用 来 创建 人 类 可 读 的 文档 ， 也 就 是 
说 ， 它 提供 了 一 种 公认 的 语法 ， 这 样 底层 格式 的 处 理 过 程 就 得 更 为 通用 ， 也 使 得 所 有 用 户 
都 能 轻易 访问 这 些 文档 。 


























然而 ， 和 HTML 不 同 ，XML 的 预定 义 很 少 。HTML 开发 人 员 都 习惯 使 用 尖 括 号 < > 来 表 
示 元 素 〈 即 语法 ) 以 及 一 系列 元 素 名 称 ( 即 head、body 等 )。XML 只 共享 前 一 个 特性 ， 即 
使 用 尖 括 号 表示 元 素 。 和 HTML 不 同 ，XML 没有 预定 义 元 素 ， 仅 仅 提供 了 一 些 规 则 ， 从 
而 允许 我 们 编写 诸如 HTML 的 其 他 语言 。 因 为 XML 定义 很 少 , 对 每 个 人 来 说 都 很 容易 接 
受 它 的 语法 ， 然 后 在 这 个 语法 的 基础 上 构建 应 用 程序 。 就 像 同 意 使 用 一 组 特定 的 字母 和 标 
点 符号 ， 但 并 不 意味 着 一 定 要 在 某 种 语言 中 才能 使 用 。 然 而 ， 如 果 你 有 HTML 的 开发 背 
景 ， 过 渡 到 XML 时 ， 需 要 做 好 准备 自己 决定 如 何 命名 你 的 标签 。 














知道 XML 源 于 SGML 应 该 能 帮助 我 们 理解 一 些 XML 的 特性 和 设计 决策 。 注 意 ， 尽 管 
SGML 本 质 上 是 一 种 以 文档 为 中 心 的 技术 ， 但 XML 的 功能 还 延伸 到 一 些 以 数据 为 中 心 的 
应 用 程序 ， 包 括 SVG。 通 常 ， 以 数据 为 中 心 的 应 用 程序 不 需要 XML 提供 的 所 有 灵活 性 和 
表现 力 ， 从 而 限制 自己 只 使 用 XML 功能 的 一 个 子 集 。 


A.2 ”XML 文档 剖析 


解释 XML 文档 是 如 何 组 成 的 最 好 的 方式 就 是 呈现 它 。 下 面 的 例子 展示 了 一 个 可 能 用 来 描 
述 作者 的 XML 文档 : 

















<?xml version="1.0”emcoding="us-ascit" ?> 
<authors> 
<person id="lear"> 
<name>Edward Lear</name> 
<nationality>British</nationality> 
</person> 
<person id="asimov"> 
<name>Isaas Asimov</name> 
<nationality>American</nationality> 
</person> 
<person id="mysteryperson"/> 
</authors> 











文档 的 第 一 行 被 称 作 XML 声明 ， 用 于 告诉 处 理应 用 我 们 使 用 的 是 哪个 版 本 的 XML (版 
本 标志 是 强制 的 ) 以 及 这 个 文档 使 用 的 是 哪 种 字符 编码 。 在 前 面 的 例子 中 ， 文 档 使 用 的 是 
ASCII 编码 (关于 字符 编码 的 重要 性 在 本 章 后 面 讨论 )。 如 果 遗 漏 了 XML 声明 ， 处 理 程序 
会 对 我 们 的 文档 作出 某 些 假设 。 特 别 是 ， 它 期 望 我 们 使 用 UTF-8 编码 一 一 Unicode 字符 集 
编码 。 然 而 ， 最 好 是 尽 可 能 使 用 XML 声明 ， 这 样 既 可 以 避免 混 请 字符 编码 ， 也 可 以 告诉 






























































注 1: 澄清 一 下 XML 和 SGML 的 关系 :XML 是 SGML 的 一 个 子 集 。 相 比 之 下 ,HTML 就 是 一 个 SGML 应 用 。 
SVG 使 用 XML 表达 操作 ， 因 此 它 是 一 个 XML 应 用 。 
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处 理 器 我 们 使 用 的 是 哪个 版 本 的 XML。 


A.2.1 元 素 和 属性 


例子 中 的 第 二 行 以 一 个 元 素 开始 ， 被 命名 为 authors。 这 个 元 素 的 内 容 包 括 <authors> 
的 右 尖 括号 > 和 </authors> 的 左 尖 之 间 的 所 有 内 容 。 实 际 的 语法 结构 <authors> 和 
</authors> 通常 分 别 被 称 为 元 素 的 起 始 标 签 和 结束 标签 。 不 要 将 标签 和 元 素 混淆 ! 注 
意 ， 元素 可 以 包含 其 他 元 素 ， 以 及 文本 。XML 文档 必须 包含 一 个 根 元 素 ， 它 包含 文档 
中 的 所 有 其 他 内 容 。 根 元 素 的 名 称 定义 XML 文档 的 类 型 。 

同时 包含 文本 和 其 他 元 素 的 元 素 被 分 类 为 混合 内 容 。SVG 的 <text> 元 素 就 是 这 样 的 元 素 。 
它 可 以 包含 文本 和 <tspan> 元 素 。 

这 个 简单 的 authors 文档 使 用 名 为 <person> 的 元 素描 述 作 者 本 身 。 每 个 person 元 素 都 有 一 
个 名 为 id 的 属性 。 和 元 素 不 同 ， 属 性 只 能 包含 文本 型 内 容 。 它 们 的 值 必须 使 用 引号 包 庄 。 
单 引 号 (') 和 双 引 号 (") 都 可 以 使 用 ， 只 要 我 们 使 用 相同 引号 即 可 。 

XML 文档 中 ， 属 性 经 常用 于 元 数据 〈 即 关于 数据 的 数据 ) 一 一 描述 元 素 内 容 的 属性 。 这 
种 情况 在 我 们 的 例子 中 就 是 ，id 包含 一 个 要 描述 的 person 的 唯一 标识 符 

就 XML 而 言 ， 属 性 出 现在 元 素 起 始 标签 中 的 顺序 是 不 重要 的 。 例 如 ， 这 里 有 两 个 元 素 ， 
就 XML 1.0 处 理应 用 程序 而 言 ， 它 们 所 包含 的 信息 是 相同 的 : 












































<animal name="dog" legs="4"/> 
<animal legs="4" name="dog"/> 





而 另 一 方面 ， 通 过 XML 处 理 器 阅读 如 下 两 行 代码 提交 给 应 用 程序 的 信息 将 会 是 两 个 不 同 
的 animal 元 素 ， 因 为 元 素 的 顺序 是 很 重要 的 : 





<animaL><name>dog</name><Legs>4</Legs></animaL> 
<animaL><Legs>4</Legs><name>dog</name></animaL> 


XML 处 理 一 组 属性 就 像 把 一 堆 东 西装 进 包 里 一 一 并 没有 隐 含 的 顺序 问题 ， 而 处 理 元 素 时 
就 像 列表 上 的 项 目 ， 是 存在 顺序 问题 的 。 


XML 开发 新 手 经 常会 问 何 时 使 用 属性 表示 信息 最 好 ， 何 时 使 用 元 素 最 好 。 正 如 从 authors 
例子 中 可 以 看 到 的 ， 如 有 果 顺 序 很 重要 ， 那 么 使 用 元 素 是 一 个 不 错 的 选择 。 总 之 ， 并 没有 一 
成 不 变 的 “最 佳 实践 ”告诉 我 们 是 选择 属性 还 是 元 素 。 


我 们 的 文档 中 最 后 描述 的 author 并 没有 什么 可 用 信息 。 我 们 只 知道 这 个 人 的 了 D 是 
mysteryperson。 文 档 使 用 了 XML 快捷 语法 来 表示 空 元 素 。 和 下 面 的 形式 是 等 价 的 : 





























<person id="mysteryperson"></person> 
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A.2.2 ”命名 语法 

XML 1.0 对 命名 元 素 和 属性 有 一 定 的 规则 。 特 别 是 : 

。 命名 区 分 大 小 写 ， 比 如 <person/> 和 <Person/> 是 不 一 样 的 ; 

。 以 xml 开始 的 命名 (包括 任意 变换 的 大 小 写 形式 ) 是 为 XML 1.0 和 它 的 附属 规范 预 留 的 ; 

。 命名 必须 以 字母 或 者 下 划 线 开头 ， 不 能 是 数字 ， 可 以 包含 任意 字母 、 数 字 、 下 划 线 或 者 
名 点。 














关于 命名 更 准确 的 描述 可 以 在 XML 1.0 规范 的 2.3 节 (http:Wwww.w3.org/TR/REC-xml/ 
#sec-common-syn) 找到 。XML 1.1 的 命名 规则 略 有 不 同 ， 主 要 是 关于 Unicode 字符 。SVG 
使 用 的 是 XML 1.0 规则 。 


A.2.3 合法 形式 

遵从 XML 语法 规则 的 XML 文档 被 认为 是 合法 形式 。 从 本 质 上 来 看 ， 结 构 的 完整 性 意味 
着 元 素 必须 正确 匹配 ， 所 有 元 素 都 应 该 闭合 。 关 于 结构 完整 性 的 正式 定义 可 以 在 XML 1.0 
规范 的 2.1 节 (http:/www.w3.org/TR/REC-xml/#sec-well-formed) 找到 。 表 A-1 展示 了 一 
些 不 正确 的 XML 文档 。 


表 A-1: 不 正确 的 XML 文档 示例 
































文档 错误 原 
<foo> 
b EE § > 、 
es 元 素 撕 套 不 正确 ， 因 为 foo 闲 合 在 它 的 子 元 素 bar 里 面 

</bar> 

<foo> 

<bar> bar 元 素 在 它 的 父 元 素 foo 闭合 之 前 没有 闭合 

</foo> 

<foo baz> ， > pa 
ee baz 属性 没有 值 。 虽 然 在 HTML 中 可 以 (比如 <table border>)， 但 是 在 XML 中 不 行 








<foo baz=23> ”baz 属性 的 值 23 没有 使 用 引号 包 右 。 和 HTML 不 同 ，XML 中 所 有 的 属性 值 必 须 用 
</foo> 引号 包 囊 











A.2.4 注释 

和 HTML 一 样 ，XML 文档 中 也 可 以 包含 注释 。XML 注释 被 设计 为 面向 人 类 可 读 。 对 于 
HTML 而 言 ， 开 发 人 员 偶尔 会 使 用 特定 的 注释 来 添加 功能 。 例 如 ， 大 多 数 Web 服务 器 都 
支持 的 “服务 端 包含 ”(Server Side Include， 简 称 SSI) 功能 就 是 以 姐 入 HTML 注释 的 方 


























注 2: 实际 上 ,一 个 名 称 还 可 以 包含 冒号 ， 但 冒号 被 用 来 分 隔 命名 空间 前 级 ， 并 且 它 也 不 能 随意 使 用 。 更 多 
信息 请 查看 Tim Bray 的 “XML 命名 空间 示例 ”: http://www.xml.com/pub/a/1999/01/namespaces.html。 
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式 使 用 的 。XML 提供 了 其 他 可 供应 用 程序 处 理 的 指令 ,因此 注释 不 应 该 用 于 除了 说 明 性 文 
字 之 外 的 任何 其 他 目的 。 








注释 的 开头 用 <!-- 表示 ， 以 --> 结束 。 任 何 除 -- 以 外 的 字符 序列 ， 都 可 以 出 现在 注释 中 。 














XML 文档 中 的 注释 往往 更 多 的 是 用 于 人 类 理解 而 不 是 机 器 理解 。SVG 中 的 <desc> 和 
<title> 元 素 可 以 避免 大 部 分 注释 需求 。 








A.2.5 实体 引用 
编写 SVG 文档 时 XML 的 另 一 个 特性 偶尔 会 大 有 用 处 ， 就 是 它 的 字符 转 义 机 制 。 


由 于 某 些 字符 在 XML 中 具有 特殊 意义 ， 所 以 就 需要 有 一 种 方式 来 表现 它们 。 例 如 ， 某 些 
情况 下 ，< 符号 可 能 真 的 是 要 代表 小 于 号 ， 而 不 是 作为 元 素 名 的 开始 符号 。 显 然 ， 仅 仅 插 
入 这 个 学 答 而 不 做 任何 转 义 模 作 会 导致 文档 不 合法 ， 因 为 处 理 程序 会 假定 我 们 是 要 开启 另 
外 一 个 元 素 。 这 一 问题 的 另 一 个 实例 是 在 属性 值 中 需要 同时 包含 双 引 号 和 单 引 号 。 这 里 有 
一 个 例子 ,演示 了 这 两 个 问题 : 














<badDoc> 
<para> 
I'd really like to use the < character 
</para> 
<note title="On the proper 'use' of the ”character"/> 
</badDoc> 


XML 中 可 以 使 用 预定 义 的 实体 引用 避免 这 一 问题 。XML 环境 中 的 单词 实体 仅仅 意味 着 一 
个 内 容 单 元 。 术 语 实体 引用 意味 着 ， 一 个 象征 性 的 符号 表示 某 个 内 容 单元 。XML 预定 义 
了 下 列 实体 符号 : 左 尖 括 号 (<)， 右 尖 括 号 (>)， 撒 号 〈')， 双 引号 〈")， 和 号 (8)。 











实体 符号 以 & 开头 ， 紧 随 其 后 的 是 一 个 名 字 (真正 意义 上 用 的 是 这 个 名 字 ， 由 XML 1.0 
规范 定义 )， 最 后 以 分 号 (;) 结尾 。 表 A-2 展示 了 可 用 于 XML 文档 中 的 5 个 预定 义 实体 。 








表 A-2: XML 1.0 预 定义 的 实体 引用 


原 字 符 实体 引用 

< &Lt; 

> &gt; 
&apos; 
&quot; 

& &amp; 


下 面 是 用 实体 引用 修订 有 问题 的 文档 之 后 的 结 采 : 


注 3: 关于 处 理 指令 (PIs) 的 讨论 在 本 书 范围 之 外 。 更 多 关于 PIs 的 信息 ， 请 参考 XML 1.0 规范 的 2.6 节 ， 
在 http:/www.w3.org/TR/REC-xml#sec-pi。 
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<badDoc> 
<para> 
I'd really like to use the &Lt; character 
</para> 
<note title="On the proper &apos;use&apos; 
of the &quot; character" /> 
</badDoc> 


在 SVG 中 也 能 使 用 这 些 预 定义 实体 ， 一 般 来 说 ， 实 体 为 我 们 创建 XML 文档 提供 了 方便 。 
XML 1.0 还 允许 我 们 自 定义 实体 ， 然 后 在 文档 中 使 用 这 些 实体 作为 “快捷 方式 ”。XML 1.0 
规范 的 第 4 节 (http://www.w3.org/TR/REC-xml/#sec-physical-struct) 描述 了 实体 的 使 用 。 








A.2.6 字符 引用 

在 SVG 文档 环境 中 我 们 还 可 能 找到 字符 引用 。 字 符 引 用 允许 我 们 通过 指定 Unicode 字符 集 
中 的 位 置 (这 个 位 置 也 被 称 为 字符 码 ) 来 表示 某 个 字符 。 表 A-3 中 的 一 些 例子 演示 了 它 的 
语法 。 


表 A-3: UTF-8 字 符 引 用 示例 





实际 字符 字符 引用 
小 &#49; 
A &#65; 
N &#XD1; 
@ &#XAE; 
注意 ， 这 些 字 符 码 可 以 用 十 进 制 或 者 用 x 做 前 缀 的 十 六 进 制 表示 。 


A.3 字符 编码 

字符 编码 这 个 主题 对 开发 者 来 说 通常 是 难以 理解 的 。 大 多 数 代码 往往 都 是 为 某 个 计算 平台 
编写 的 ， 通 常情 况 下 运行 在 一 个 系统 中 。 尽 管 互联 网 正在 快速 地 改变 ， 但 我 们 大 多 数 人 从 
来 都 没有 对 国际 化 进行 过 深入 的 思 芳 。 

















XML 被 设计 为 一 种 互联 网 友好 的 语法 ， 用 于 信息 交换 ， 并 且 其 核心 已 经 国际 化 了 。XML 
处 理 程序 最 基本 的 要 求 之 一 是 ， 它 们 要 支持 Unicode 标准 的 字符 编码 。Unicode 试图 将 世 
界 上 所 有 的 语言 包含 在 一 个 字符 集中 。 因 此 ， 它 非常 大 ! 











A.3.1 ”Unicode 编 码 方 案 


Unicode 3.0 有 超过 57 700 个 字符 码 , 每 个 都 对 应 一 个 字符 “。 如 果 将 每 个 字符 在 字符 集中 的 








注 4: 你 可 以 在 http:Wwww.unicode.org/charts/ 看 到 所 有 的 字符 。 
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位 置 作为 编码 来 表达 一 个 Unicode 字符 (与 ASCII 同样 的 方式 )， 表 达 完 整 的 字符 范围 时 
每 个 字符 需要 4 个 八 位 字 节 。 显然， 如 果 文 档 100% 使 用 美式 英文 编写 ， 将 比 ASCII 字符 
体积 大 四 倍 一 一 所 有 ASCI 字符 都 使 用 7 位 表示 。 这 就 要 求 处 理 器 程序 对 存储 空间 和 内 存 
作出 改变 。 














幸运 的 是 ， 有 两 种 Unicode 编码 方案 解决 了 这 个 问题 : UTF-8 和 UTF-16。 顾 名 思 义 ， 使 
用 这 种 编码 时 应 用 程序 可 以 一 次 处 理 8 位 或 16 位 片段 的 文档 。 当 文档 所 需 的 字符 码 不 能 
通过 一 个 块 表示 上 时， 会 使 用 一 个 特定 的 位 来 指示 字符 码 需 要 和 接 下 来 的 块 一 起 计算 。 在 
UTF-8 中 ， 这 通过 将 第 一 个 八 位 的 最 高 位 设置 为 1 来 表示 。 

这 种 方案 意味 着 UTF-8 编码 在 表示 拉丁 字 语 言 (如 英语 ) 时 是 高 效 的 。 在 UTF-8 中 ， 所 


有 ASCII 字 符 集 都 是 原生 表示 的 一 一 一 个 ASCI 文档 和 它 等 价 的 UTF-8 定义 按 字 节 比 较 
是 相同 的 。 











这 些 知识 还 能 帮助 我 们 调试 编码 错误 。 一 个 常见 的 错误 源 于 ASCI 是 UTF-8 的 真子 集 一 一 
程序 员 们 习惯 了 这 一 事实 并 生成 一 个 UTF-8 文档 ， 然 后 把 它们 用 作 ASCII。 当 XML 解析 
器 处 理 一 个 包含 诸如 A 这 类 字符 的 文档 中 时 会 出 错 。 因 为 在 UTF-8 中 这 个 字符 不 能 只 用 
一 个 八 位 字 节 表示 ， 所 以 会 在 文档 中 输出 两 个 八 位 字 节 序列 ， 在 非 Unicode 阅读 器 或 者 文 
本 编辑 器 中 ， 它 看 起 来 就 像 一 对 垃圾 字符 。 


A.3.2 ”其 他 字符 编码 
在 计算 机 历史 环境 中 ，Unicode 是 一 个 相对 较 新 的 发 明 。 原 生 操 作 系 统 对 Unicode 的 支持 
并 不 普遍 。 比 如 ， 诸 如 Windows 95 和 98 这 样 的 老牌 系统 就 不 支持 。 





























XML 1.0 允许 文档 使 用 任意 在 互联 网 号 码 分 配 局 (Internet Assigned Numbers Authority， 
IANA) 注册 通过 的 字符 集 进行 编码 。 欧 洲 的 文档 通常 使 用 ISO 拉丁 字符 集 之 一 进行 编码 ， 
比如 ISO-8859-1。 日 本 的 文档 通常 使 用 Shift-JIS， 而 中 文 文档 使 用 GB2312 和 Big5。 





IANA (http://www.iana.org/assignments/character-sets/character-sets.xhtml) 维护 了 一 个 完整 


的 注册 字符 集 列表 。 


XML 1.0 规范 并 不 要 求 XML 处 理 器 支持 UTF-8 和 UTF-16 之 外 的 更 多 编码 形式 ， 但 是 支 
持 其 他 编码 很 常见 ， 比 如 US-ASCI 和 ISO-8859-1。 虽 然 大 多 数 SVG 文档 当前 都 是 按照 
ASCI (或 者 UTF-8 的 ASCI 子 集 ) 处 理 的 ， 但 是 没什么 可 以 阻挡 SVG 文档 包含 诸 其 他 
文字 (如 韩国 文字 )。 然 而 ， 我 们 可 能 要 探究 一 下 我 们 使 用 的 计算 平台 所 支持 的 编码 ， 然 
后 找 出 可 以 用 来 替代 的 编码 。 









































注 5: 一 个 八 位 字 节 就 是 8 个 二 进 制 数字 (也 叫 比特 ) 组 成 的 串 。 通 常 认为 字 节 和 八 位 字 节 一 样 ， 但 并 非 总 
是 如 此 。 
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A.4 有 效 性 
除了 格式 正确 之 外 ，XML 1.0 还 提供 了 另 一 个 级 别 的 验证 ， 称 作 有 效 性 。 为 了 解释 为 什么 


有 效 性 很 重要 ， 我 们 来 看 一 个 简单 的 例子 。 假 设 我 们 为 朋友 的 电话 号 码 创 造 了 一 个 简单 的 
XML 格式 : 


<phonebook> 
<person> 
<name>Albert Smith</name> 
<number>123-456-7890</number> 
</person> 
<person> 
<name>Bertrand Jones</name> 
<number>456-123-9876</number> 
</person> 
</phonebook> 


基于 这 个 格式 ， 我 们 还 构建 了 一 个 程序 用 于 显示 和 搜索 电话 号 码 。 这 个 程 a 我 们 
将 它 共 享 给 朋友 。 然 而 ， 你 的 朋友 并 不 像 我 们 一 样 关心 细节 ， 然 后 他 试图 给 这 个 程序 提供 
一 个 带 有 <phone> 元 素 而 不 是 <number> 元 素 的 电话 本 文件 : 








<phonebook> 
<person> 
<name>Melanie Green</name> 
<phone>123-456-7893</phone> 
</person> 
</phonebook> 


注意 ， 虽 然 这 个 文件 的 格式 是 完全 正确 的 ， 但 是 它 并 不 符合 我 们 给 电话 本 指定 的 格式 ， 你 
会 发 现 需要 改变 这 个 程序 以 应 对 这 种 情况 。 如 果 你 朋友 像 你 一 样 使 用 number 表示 电话 号 
码 ， 而 不 是 phone， 就 不 会 有 问题 。 然 而 ,事实 上 ， 第 二 个 文件 并 不 是 一 个 有 效 的 电话 本 
文档 。 

有 效 性 是 一 个 很 有 用 的 普通 概念 ， 我 们 需要 一 种 机 器 可 读 的 方式 告诉 它们 什么 是 有 效 的 文 
档 ;， 也 就 是 说 ， 哪 些 元 素 和 属性 必须 以 什么 样 的 顺序 出 现 。XML 1.0 通过 引入 文档 类 型 定 
义 (Document Type Definition， 简 称 DTD) 来 实现 这 一 点 。 对 SVG 而 言 ， 我 们 不 需要 了 
解 大 多 关于 DTD 的 信息 。SVG 的 确 有 一 个 DTD， 它 详细 准确 地 曾 述 了 哪些 元 素 和 属性 组 
合 能 生成 有 效 文档 。 



































A.4.1 文档 类 型 定义 

DTD 的 目的 是 在 特定 的 文档 中 告知 允许 的 元 素 和 属性 ， 以 及 约束 它们 在 该 文档 类 型 中 显示 
的 顺序 。DTD 包含 定义 元 素 类 型 和 属性 列表 的 声明 。DTD 可 能 跨 多 个 文件 ，SVG1.1 规范 
使 用 的 模块 化 DTD 分 布 在 10 多 个 文件 中 。 然 而 ， 在 文件 中 包含 男 一 个 文件 的 机 制 一 一 参 
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数 实体 一 超出 了 本 书 的 讨论 范围 。 最 常见 的 错误 是 混 清 元 素 和 元 素 类 型 。 区 别 在 于 ， 元 
素 是 XML 文档 结构 中 的 真实 实例 ， 而 元 素 类 型 是 该 实例 元 素 的 类 型 。 





A.4.2 ”组 合 在 一 起 

重要 的 是 要 知道 如 何 把 文档 和 DTD 定义 连接 到 一 起 。 我 们 用 文档 类 型 声明 <!DOCTYPE ...> 
实现 这 一 点 ， 把 它 插入 到 XML 文档 的 开始 部 分 ， 跟 在 XML 声明 后 面 。 下 面 是 一 个 虚构 的 
例子 : 

















<?xml version="1.0" encoding="Uus-ascii"?> 
<!DOCTYPE authors SYSTEM “http://example.com/authors.dtd"> 
<authors> 
<person id="lear"> 
<name>Edward Lear</name> 
<nationality>British</nationality> 
</person> 
<person id="asimov"> 
<name>Isaac Asimov</name> 
<nationality>American</nationality> 
</person> 
<person id="mysteryperson"/> 
</authors> 


这 个 例子 假设 DTD 文件 已 经 放 在 example.com 服务 器 上 了 。 注 意 ， 文 档 类 型 声明 指定 了 文 
档 的 根 元 素 ， 而 不 是 DTD 本 身 。 我 们 要 使 用 同一 DTD 定义 person、name 和 nationality 
作为 有 效 文档 的 根 元 素 。 某 些 DTD， 比 如 用 于 技术 文档 的 DocBook DTD'， 使 用 这 一 特性 
的 效果 很 好 ， 允 许 我 们 为 多 个 文档 类 型 提供 同一 DTD。 


有 效 的 XML 处 理 器 必须 要 检查 输入 文档 的 DTD。 如 果 无 效 ， 文 档 要 被 拒绝 。 回 到 前 面 的 
电话 本 例子 ， 如 果 我 们 的 应 用 程序 验证 输入 文件 符合 电话 本 DTD， 我 们 就 不 必 调 试 程序 的 
问题 以 及 纠正 朋友 的 XML 文件 ， 因 为 我 们 的 应 用 程序 会 拒绝 无 效 的 文档 。 有 些 读 取 SVG 
文件 的 程序 有 内 置 的 XML 验证 器 用 于 确保 输入 有 效 (保持 正确 性 )。A.6 节 中 讨论 了 这 种 
XML 验证 左 。 
































A.5 XML 命名 空间 


XML 1.0 允许 开发 人 员 创 建 自己 的 元 素 和 属性 ， 但 是 这 也 可 能 造成 命名 冲突 。<title> 在 
某 个 上 下 文 环 境 中 可 能 意味 着 一 本 书 的 名 字 ， 但 是 在 另 一 个 上 下 文中 也 可 能 意味 着 人 名 
(Ms.、Dr. 等 ) 前 级 。XML 规范 中 的 命名 空间 (http://www.w3.org/TR/REC-xml-names/) 
提供 了 一 种 机 制 ， 开 发 者 可 以 使 用 统一 资源 标识 符 (URIs) 标识 特定 的 词汇 。 























SVG 使 用 URI http://www.w3.org/2000/svg 作为 它 的 命名 空间 。URI 只 是 一 个 标识 符 一 一 





注 6: 请 参考 http://www.docbook.org/。 
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在 浏览 器 中 打开 这 个 地 址 会 跳 转 到 SVG、XML 1.0 以 及 XML 规范 中 的 命名 空间 。 处 理 程 
序 可 以 使 用 命名 空间 来 识别 当前 位 置 的 词汇 代表 的 确切 含义 。 








SVG 在 文档 的 根 元 素 中 应 用 命名 空间 : 

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> 

</svg> 
xmtns 属性 定义 命名 空间 ， 实 际 上 就 是 提供 SVG DTD 作为 默认 值 。 然 而 ， 如 果 我 们 不 明 
确 使 用 命名 空间 ， 有 些 浏览 器 不 会 党 染 SVG 文档 (如 果 提 供 了 命名 空间 ， 就 必须 是 一 个 


准确 的 值 )。 命 名 空间 声明 会 应 用 给 所 在 元 素 包含 的 所 有 元 素 ， 包 括 容器 元 素 。 这 意味 着 
名 为 svg 的 元 素 也 在 http://www.w3.org/2000/svg 这 一 命名 空间 中 。 


SVG 为 其 内 容 使 用 “默认 命名 空间 ”， 使 用 SVG 元 素 时 元 素 名 无 需 任何 前 绥 。 命 名 空间 也 
可 以 使 用 前 级 ， 如 下 所 示 : 














<svgns:svg xmlns:svgns="http://www.w3.org/2000/svg" 
width="100" height="100"> 


</svgns:svg> 
在 这 种 情况 下 ， 命 名 空间 URI http://www.w3.org/2000/svg 会 给 所 有 元 素 应 用 svgns 前 组 。 


SVG 1.0 DTD 不 会 验证 这 些 文档 。 


表面 上 看 命名 空间 非常 简单 ， 但 是 在 神秘 的 XML 中 它 是 一 个 众所周知 的 战场 。 关 于 命名 
空间 的 更 多 信息 ， 可 以 参考 XML in a Nutshell 或 者 Learning XML (都 由 0 Reilly 出 版 ) 。 


A.6 ”处理 XML 的 工具 


许多 编程 语言 都 有 用 于 处 理 XML 的 解析 器 。 大 多 数 都 是 免费 的 ， 绝 大 多 数 都 是 开源 的 。 





A.6.1 选择 解析 器 

XML 解析 器 通常 就 是 与 我 们 自己 的 程序 配合 的 代码 库 。SVG 程序 把 XML 移交 给 解析 器 ， 
然后 返回 关于 XML 文档 内 容 的 信息 。 通 常 ， 解 析 器 通过 事件 或 者 文档 对 象 模型 (DOMD) 
做 这 件 事 。 


对 于 基于 事件 的 解析 ， 遇 到 解析 事件 时 解析 器 会 在 我 们 的 程序 中 调用 一 个 国 数 。 解 析 事 件 
包含 查找 起 始 元 素 、 结 束 元 素 或 者 注释 。 大 多 数 Java 实现 的 基于 事件 的 解析 器 都 遵循 一 个 
叫 作 SAX (http://www.megginson.com/downloads/SAX/) 的 标准 API， 它 也 对 其 他 语言 做 
了 实现 ， 比 如 Python 和 Perl。 
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基于 DOM 的 解析 器 以 完全 不 同 的 方式 工作 。 它 们 会 消耗 整个 XML 输入 文档 ， 返 回 SVG 
软件 可 以 查询 和 修改 的 树 形 数据 结构 。DOM 是 一 个 有 自己 的 文档 (http://www.w3.org/ 
DOM/) 的 W3C 标准 。 


随 着 XML 的 成 熟 ， 混 合 技术 提供 了 两 全 其 美的 方案 。 如 果 想 找 出 你 所 喜欢 的 编程 语言 的 
可 用 新 特性 ， 请 留意 下 面 的 在 线 资源 : 





。 XML.com 资 源 指 南 


http://www.xml.com/resourceguide/ 


。 免费 XML 工 具 指 南 


http://www.garshol.priv.no/download/xmltools/ 


A.6.2 XSLT 处 理 器 

许多 XML 应 用 都 需要 将 一 个 XML 文档 转换 为 男 外 一 个 XML 文档 或 者 是 HTML。W3C 
定义 了 一 种 叫 作 XSLT 的 特殊 语言 来 处 理 这 个 转换 。XSLT 处 理 器 适用 于 所 有 的 主流 编程 
平台 。 


























XSLT 的 工作 原理 是 使 用 一 个 样式 表 ， 它 包含 描述 如 何 处 理 XML 文档 元 素 的 模板 。 这 些 
模板 通常 指定 XML 输出 特定 的 元 素 或 者 属性 。 使 用 一 种 叫 作 XPath 的 W3C 技术 不 仅 可 以 
让 我 们 灵活 地 做 到 “对 每 个 person 元 素 做 某 个 操作 ”， 还 能 使 用 更 复杂 的 指令 “对 name 属 
性 为 Fred 的 第 三 个 person 元 素 做 某 个 操作 ”。 








由 于 这 非常 灵活 ， 有 些 为 XSLT 兴起 的 应 用 并 不 是 真正 的 转换 应 用 ， 而 只 是 利用 了 在 某 些 
指定 的 元 素 模 式 和 顺序 上 触发 操作 的 能 力 。XSLT 还 允许 执行 自 定 义 代码 ， 与 XSLT 结合 
后 ，XPath 就 可 以 让 XSLT 处 理 器 来 驱动 一 些 应 用 程序 ， 比 如 索引 程序 。 第 15 章 中 可 以 看 
到 XSLT 的 简单 介绍 。 














XSLT 和 XPath 对 应 的 W3C 规范 分 别 位 于 http://w3.org/TR/xslt 和 http://w3.org/TR/xpath。 
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附录 B 


样式 表 介 绍 





在 第 5 章 ， 我 们 说 过 SVG 元 素 的 一 些 属性 可 以 控制 元 素 的 几何 性 质 。 比 如 <circte> 的 
cx 属性 可 以 控制 圆 的 中 间 点 x 方向 的 位 置 。 另 外 还 有 一 些 属性 可 以 控制 元 素 的 表现 ， 比 
如 fiLL。 而 样式 表 提 供 了 一 种 方法 ， 可 以 将 表现 和 几何 性 质 分 离 ， 这 样 如 果 很 多 元 素 都 使 
用 同一 个 样式 表 的 话 ， 只 要 改动 样式 表 中 的 一 个 地 方 ， 就 可 以 改变 很 多 不 同 的 SVG 元 素 
(甚至 SVG 文档 ) 的 表现 。 


B.1 样式 的 结构 


按照 规范 ， 一 条 样式 由 元 素 上 的 一 个 视觉 属性 以 及 为 该 属性 指定 的 值 组 成 。 属 性 名 和 值 之 
间 使 用 冒号 分 隔 。 例 如 ， 要 将 某 元 素 的 轮廓 指定 为 监 色 ， 那 么 对 应 的 样式 为 : 
































stroke: blue 
要 指定 多 个 样式 属性 的 话 ， 需 要 使 用 分 号 将 这 
为 红色 ， 宽 度 为 3 像素 ， 填 充 色 为 淡 蓝 色 。 最 
必需 的 ， 但 是 这 样 看 起 来 更 统一 。 


些 属性 分 隔 开 。 下 面 的 样式 指定 了 轮廓 颜色 
后 一 个 属性 后 面 也 跟 了 一 个 分 号 ， 这 并 不 是 














stroke: red; stroke-width: 3px; fill: #ccccff; 


B.2 内 联 样 式 : style 属 性 


一 旦 决定 为 某 个 元 素 应 用 特定 的 视觉 样式 ， 首 先 要 选择 需要 应 用 样式 的 元 素 。 为 单一 元 素 
间 定 样式 ， 最 简单 的 方法 是 将 样式 写 在 style 属性 中 。 所 以 ， 如 果 你 希望 将 前 面 的 样式 应 

















249 


用 到 文档 中 的 一 个 <circle> 元 素 中 ， 可 以 这 样 写 : 


<circle cx="50" cy="40" r="12" 
style="stroke: red; stroke-width: 3px; fill; #ccccff;"/> 


[| 外 * 
B.3 内藤 样式 表 
如 果 你 希望 将 样式 应 用 到 单个 文档 中 所 有 的 <circle> 元 素 上 ， 那 么 可 以 添加 一 个 内 骨 样 式 
表 。 样 式 表 由 选择 器 (应 用 样式 的 元 素 名 称 ) 和 元 素 应 用 的 样式 组 成 。 其 中 样式 部 分 被 包 
右 在 一 对 大 括号 中 。 下 面 的 样式 表 会 应 用 到 <circle> 和 <rect> 元 素 上 : 























<style type="text/css"><![CDATA[ 
circle { 
stroke: red; stroke-width: 3px; 
fill: #ceecffs 


rect { fill: gray; stroke: black; } 
]]></style> 





当 你 在 SVG 文档 中 添加 <style> 元 素 的 时 候 ， 应 该 将 样式 内 容 包 庄 在 <![CDATA[ 和 ]]> 
中 。 这 样 的 写法 可 以 让 XML 解析 器 知道 这 里 面 的 内 容 只 是 字符 内 容 ， 在 任何 情况 下 都 不 
应 该 被 当成 XML 的 结构 来 解析 。 


因为 样式 表 被 内 艇 在 文档 中 ， 所 以 它 只 会 应 用 到 单个 文档 中 。 如 果 你 希望 在 很 多 文档 中 应 
用 样式 ， 让 这 些 文档 中 所 有 的 圆 和 和 矩形 都 应 用 前 面 的 样式 ， 则 需要 将 前 面 的 样式 (不 含 
<style> 和 <!CDATA[) 放 到 一 个 单独 的 文件 中 ， 比 如 叫 myStyle.css。 然 后 在 各 个 SVG 文档 
中 插入 下 面 的 代码 : 






































<?xml-stylesheet href="myStyle.css" type="text/css"?> 


接 下 来 ， 如果 要 让 所 有 的 矩形 都 填充 上 淡 绿 色 ， 并 将 轮 廊 改 为 深 绿色 ， 则 只 需要 修改 
myStyle.css 即 可 : 


rect {fill: #ccffcc; stroke: #006600;} 


然后 重新 加 载 SVG 文档 ， 就 会 看 到 绿色 的 和 矩形， 而 不 是 灰色 的 矩形 。 


B.4 样式 类 
上 面 的 样式 表 会 影响 所 有 的 <rect> 和 <circte> 元 素 。 假 设 我 们 只 需要 在 一 部 分 贺 上 加 上 
样式 ， 则 需要 使 用 样式 类 。 如 下 方 的 代码 ， 在 circte 后 面 加 上 一 个 点 ， 再 加 上 一 个 类 名 : 











circle.special { 
stroke: red; stroke-width: 3px; 
fiUls ecceffs 
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} 


如 果 SVG 文档 中 有 如 下 元 素 ， 则 第 一 个 元 素 会 是 默认 样式 (黑色 填充 ， 无 轮廓 )， 第 二 个 
元 素 会 应 用 在 样式 表 中 定义 的 样式 ， 因 为 它 的 类 名 与 样式 表 中 的 类 名 匹配 : 





<circle cx="40" cy="40" r="20"/> 
<circle cx="60" cy="20" r="10" class="special"/> 





a 以 应 用 于 任何 元 素 的 通用 样式 类 。 假 设 有 很 多 不 同 的 图 形 对 象 都 作为 警 
告 标识 ， 你 可 能 希望 它们 的 填充 色 是 黄色 ， 并 带 有 红色 的 轮廓 。 你 可 以 使 用 一 个 只 有 类 名 
的 样式 选择 器 





.warning { fill: yellow; stroke: red; } 


这 样 的 通用 样式 类 可 以 应 用 到 任何 SVG 元 素 上 。 在 下 面 的 例子 中 ， 和 矩形 和 三 角形 都 会 是 
黄色 填充 和 红色 轮廓 ; 





<rect class="warning" x="5" y="10" width="20" height="30"/> 
<polygon class="warning" points="40 40, 40 60, 60 50"/> 
class 属性 可 以 包含 很 多 类 名 ,使 用 空白 分 隔 ， 这 些 类 名 中 的 属性 会 登 加 应 用 到 当前 元 素 
上 。 下面 的 代码 为 前 面 的 例子 添加 了 一 个 新 的 通用 类 名 seeThrough， 效 果 是 半 透 明 ， 应 用 
到 三 角形 上 : 
<svg width="100" height="100" viewBox="0 0 100 100"> 
<style type="text/css"><![CDATA[ 
.warning { fill: yellow; stroke: red; } 
.seeThrough { fill-opacity: 0.25; stroke-opacity: 0.5; } 
]]></style> 
<rect class="warning" x="5" y="10" width="20" height="30"/> 
<polygon class="warning seeThrough" points="40 40, 40 60, 60 50"/> 
</svg> 


B.5 在 SVG 中 使 用 CSS 


问题 来 了 : 哪些 SVG 元 素 的 属性 也 可 以 在 样式 表 中 声明 ? 表 B-1 是 一 个 可 以 在 样式 表 中 
使 用 的 属性 列表 ， 包 括 属 性 名 、 合 法 值 (默认 值 以 粗 体 显示 ) 以 及 可 以 应 用 的 元 素 。 这 个 
表 从 SVG 标准 中 的 属性 索引 部 分 (http://www.w3.org/TR/SVG/) 修改 而 来 。 


fill 和 stroke 的 值 类 型 为 paint， 也 就 是 以 下 儿 种 之 一 : 











。 None 


注 1: W3C 版 权 所 有 ，2001( 麻 省 理工 学 院 ， 法 国 国 家 信息 与 自动 化 研究 所 ， 庆 应 义 熟 大 学 )。 保 留 所 有 权 
利 。http://www.w3.org/Consortium/Legal/。 
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。 CcurrentColor 
。 颜色 值 ， 详 见 4.2.2 市 
。 以 url(...) 格式 指定 的 渐变 或 模式 





为 了 防止 加 载 渐变 或 者 模式 时 出 错 ， 可 以 指定 回 





将 首先 想 用 的 值 放 前 理 











o 


表 B-1: SVG 的 CSS 属 性 表 





退 的 属性 值 ， 





名 称 


alignment-baseline 


值 


auto|baseline|before-edge|text-before- 
edge|middle|after-edge|text-after-edge|ideographic| 
alphabetic|hanging|mathematical 


只 需要 用 空格 分 隔 即 可 ， 且 


应 用 元 素 
<tspan>、<tref>、<altGlyph>、 
<textPath> 





baseline-shift 


baseline|sub|super|percentage|legnth 


<tspan>、<tref>、<altGlyph>、 
<textPath> 元 素 
































clip-path uri 包 事 元素 和 图 形 元 素 
clip-rule nonzerolevenodd|cLass=noxref 在 元 素 中 的 图 形 元 素 
color color ] 于 为 fill、stroke、stop- 








color、 flood-color、lighting- 


color 提供 潜在 的 非 直 接 值 


currentColor) 
































color-interpolation 


auto|sRGB| linearRGB 





包 右 元 素 、 图 形 元 素 和 





color- 
interpolation- 
filters 


color-profile 


color-rendering 


auto|sRGB|LtnearRGB 


auto|sRGB|name|uri 


auto|optimizeSpeed|optimizeQuality 


滤 镜 基 元 























引用 栅 格 图 像 的 元 素 
包 焉 元 素 、 图 形 元 素 和 
































cursor urijauto|crosshair|default|pointer|| 包 焉 元 素 和 图 形 元 素 
movel|le-resize|ne-resize|lnw-resizel|n- 
resize|se-resize|sw-resize|s-resizel|w- 
resize|text|wait|help 

direction Verlrtt <text>、<tspan>、<tref> 和 

<textPath> 

display inline|block|list-item|run-|<svg>、<g>、<switch>、<a>、 


in|lcompact|marker|table|inline-tablel| 
table-row-group|table-header-group|table-footer- 
group|table-row|table-column-group|table-column 
|table-cell|table-caption|none 


<foreign0bject> 图 形 元 素 ( 包 
括 元 素 )， 以 及 子 元 素 ( 即 
<tspan>、<tref>、<altGlyph>、 
<textPath>)。 除了 none 以 外 ， 
其 他 的 值 都 会 改变 图 形 元 素 的 显 
示 情 况 








dominant-baseline 





autoluse-script|lno-change|reset-sizel| 
alphabetic|hanging|ideographic|mathematical| 
central|lmiddle|text-after-edge|text-before- 
edge|text-top|text-bottom 





文本 内 容 元 素 








252 | 附录 B 


沾 





名 称 值 应 用 元 素 
enable-background accumulate|new [x y width height] 包 焉 元 素 





fill 





参考 表 未 尾 处 paint 的 描述 ， 上 默认 值 为 black 














fill-opacity 


不 透明 度 (默认 值 为 1) 


到 形 和 文本 内 容 元 素 
形 和 文本 内 容 元 素 





网 








fill-rule 
filter 


flood-color 


nonzero|evenodd 
urilnone 


currentColor| 颜色 (默认 为 black) 














到 形 和 文本 内 容 元 素 
包 囊 元 素 和 图 形 元 素 
<feFLood> 元 素 














flood-opacity 


不 透明 度 (默认 为 1) 





<feFlood> 元 素 






























































font font-style,font-variant,font-| 文 本 内 容 元 素 
weight,font-size line-height,font- 
family|lcaption|icon|menu|message-box|small- 
caption|status-bar 

font-family 一 系列 的 字体 名 称 或 者 字体 族 名 称 文本 内 容 元 素 

font-size absolute-size|relative-size|length|percentage | 文本 内 容 元 素 

font-size-adjust 数字 |none 文本 内 容 元 素 

font-stretch normal|wider|narrower|ultra-condensed|extra- | 文本 内 容 元 素 
condensed|condensed|semi-condensed|semi- 
expanded|expanded|extra-expandedl|ultra- 
expanded 

font-style normal|italic|oblique 文本 内 容 元 素 

font-variant normal small-caps 文本 内 容 元 素 

font-weight normal|bold|bolder|lighter|100|200|130601499| | 文本 内 容 元 素 
5001600170018001900 

glyph-orientation- 度 (默认 为 6deg) 文本 内 容 元 素 

horizontal 

glyph-orientation- | auto| 角度 文本 内 容 元 素 

vertical 

image-rendering auto|optimizeSpeed|optimizeQuality 图 片 

kerning auto| length 文本 内 容 元 素 

letter-spacing normal| length 文本 内 容 元 素 








lighting-color 


currentColor| 颜色 


(默认 值 为 white) 





<feDiffuseLighting> 和 


<feSpecuLarLighting> 元 素 























marker、marker-end、| noneluri <path>、<line>、<polyline> 和 
marker-mid、marker- <polygon> 元 素 

start 

mask urilnone 包 于 元 素 和 图 形 元 素 

opacity 不 透明 度 (默认 值 为 1) 包 囊 元 素 和 图 形 元 素 

overflow visible|hidden|scroll|auto 建 立新 的 viewport 的 元 素 、 





<pattern> 元 素 和 <marker> 元 素 





pointer-events 





visiblepainted|visiblefill|visibleStrokel|visib 
lelpainted|fill|strokelall|lnone 























到 形 元 素 
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人 














名 称 值 应 用 元 素 
shape-rendering auto|optimizeSpeed|crispEdges |geometricprecision 图 形 








stop-color 


currentColor| 颜色 值 (默认 值 为 bLack) 


<stop> 元 素 





stop-opacity 


不 透明 度 (默认 值 为 1) 





<stop> 元 素 



































































































































stroke 参考 表 末 尾 处 paint 的 描述 ， 默 认 值 为 none 图 形 和 文本 内 容 元 素 

stroke-dasharray none|dasharray 图 形 和 文本 内 容 元 素 

stroke-dashoffset “| dashoffset (默认 值 为 0) 图 形 和 文本 内 容 元 素 

stroke-Linecap butt|round|square 图 形 和 文本 内 容 元 素 

stroke-linejoin miter |round|bevel 图 形 和 文本 内 容 元 素 

stroke-miterlimit |miterlimit (默认 值 为 4) 图 形 和 文本 内 容 元 素 

stroke-opacity 不 透明 度 (默认 值 为 1) 图 形 和 文本 内 容 元 素 

stroke-width width (默认 值 为 1) 到 形 和 文本 内 容 元 素 

text-anchor start|middLe | end 文本 内 容 元 素 

text-decoration none|underline|overline|line-through|blink 文本 内 容 元 素 

text-rendering auto|optimizeSpeed|optimizeLegibility| | 元素 

geometricprecision 

unicode-bidi normal|embed|bidi-override 文本 内 容 元 素 

visibility visible|hidden|collapse 图 形 元 素 (包括 <text> 元 素 ) 和 
文本 子 元 素 (<tspan>、<tref>、 
<altGlyph>、<textPath> 和 <a>) 

word-spacing normal| Length 文本 内 容 元 素 











writing-mode 





Lr-tb|rL-tb|ltb-rLlLrlrLltb 





<text> 元 素 
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附录 C 








很 多 图 形 设 计 师 希望 使 用 第 13 章 中 提 到 的 脚本 来 操作 SYG。 如 果 他 们 对 编程 不 熟悉 的 话 ， 
很 可 能 会 使 用 被 主流 观念 叫 作 “ 巫 毒 脚 本 ” (voodoo scripting) 的 方式 来 编写 代码 。 这 种 
编程 方式 就 像 是 背诵 一 段 神 秘 的 咒语 ， 然 后 希望 敌人 被 吓 死 。 有 具体 的 做 法 就 是 复制 其 他 人 
的 一 段 神秘 代码 到 SVG 文档 中 ， 然 后 希望 文档 能 正常 工作 。 本 附录 只 是 做 了 简单 的 总 结 ， 
不 要 幻想 着 读 完 之 后 就 能 成 为 编程 大 师 。 我 们 的 目标 是 介绍 一 些 简 单 的 编程 概念 ， 以 减少 
所 复制 代码 的 神秘 感 。 我 们 要 讨论 的 语言 是 ECMAScript， 它 是 JavaScript 的 标准 化 版 本 。 
ECMAScript 中 使 用 的 很 多 概念 和 其 他 编程 语言 都 是 通用 的 。 





























C.1 常量 

常量 是 指 一 个 永远 不 会 改变 的 数字 或 者 字符 串 ， 例 如 2、2.71828、"message" 和 
'communication' 等 。 其 中 后 面 两 个 叫 作 字符 串 常 量 。 在 ECMAScript 中 ， 字 符 串 可 以 
使 用 单 引 号 ， 也 可 以 使 用 双 引 号 。 这 样 在 编写 类 似 "0'Reilly Media'" 或 者 'There is no 
"there" there.' 的 字符 串 时 就 会 很 方便 。 


有 时 你 也 会 看 到 两 种 布尔 值 常量 true 和 false， 用 于 区 分 “是 / 否 ” 的 场景 。 





C.2 变量 


变量 是 指 在 内 存 中 用 一 段 地 址 保存 一 个 值 ， 这 个 值 可 能 会 变化 。 你 可 以 把 它 想 象 成 一 个 贴 
有 名 字 的 信箱 ， 信 箱 中 保存 着 写 着 各 种 信息 的 报纸 。 假 设 你 需要 跟踪 矩形 的 当前 宽度 ， 并 
存储 一 个 可 变 的 消息 ， 则 在 ECMAScript 中 可 以 这 样 定义 变量 ，; 
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var currentWidth; 
var message; 


可 以 将 它 可 视 化 为 图 C-1。 








currentWidth message 











C-1; 两 个 空 变量 














这 样 定义 的 变量 在 “信箱 ”中 没有 任何 东西 ， 技 术 术 语 的 描述 方式 则 是 这 些 变量 的 值 未 定 
义 。 变 量 名 称 必须 以 字母 或 下 划 线 开始 ， 只 能 包含 字母 、 数 字 和 下 划 线 。' 变量 名 称 是 大 小 
写 敏感 的 ， 所 以 width、width 和 MIDTH 是 三 个 不 同 的 变量 。 


C.3 ”赋值 和 运算 


可 以 通过 赋值 的 方式 将 一 个 值 放 到 变量 中 ， 具 体 的 语法 是 变量 名 后 跟 一 个 等 号 ， 然 后 跟 上 
值 ， 比如 : 








currentWidth = 32; 
message = "I love SVG."; 


你 可 以 这 样 读 :“ 将 currentwidth 的 值 设 为 32” 和 “将 message 的 值 设 为 "I Love SVG."”。 
事实 上 ， 这 条 语句 是 从 右 向 左 执行 的 ， 等 号 右边 的 值 会 赋 给 等 号 左边 的 变量 。 需 要 注意 的 
是 ，ECMAScript 语句 以 分 号 结尾 。 有 些 情况 下 分 号 并 不 是 必需 的 ， 但 我 们 也 会 加 上 一 个 ， 
宁可 多 一 个 没 用 的 也 不 要 在 有 用 的 时 候 少 一 个 。 图 C-2 展示 了 这 两 句 执 行 之 后 的 情况 。 














currentWidth message 


32 I love SVG. 














C-2:， 两 个 被 赋值 后 的 变量 


事实 上 ， 上 面 的 描述 并 不 是 特别 准确 。 在 等 号 右边 的 值 其 实 会 先进 行 运算 ， 然 后 再 赋值 给 
左边 的 变量 。 我 们 可 以 做 一 下 数学 运算 : 






































var info; 0 
info = 7 + 2; 8 
info =7*2; 日 
info = info + 1; @ 

注 1: 事实 上 ， 变 量 名 称 等 价 于 ES5 文档 中 的 标识 符 Identifier， 它 等 于 标识 名 称 JdentifierName 除去 保留 
字 ReservedWord 的 部 分 。 标 识 符 Identifier 可 使 用 的 字符 并 非 只 限 字 母 、 数 字 和 下 划 线 。 详 见 http:// 
www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf。 一 一 译 者 注 
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info = "door"; © 
info = info + "bell" @ 

@ 创建 一 个 名 为 info 的 空 变量 。 

@ info 现在 的 值 为 9 (7+2)。 你 还 可 以 使 用 减 号 〈-) 来 进行 减法 运算 。 

@ 乘法 用 星 号 表示 ， 因 为 乘 号 非常 容易 与 字母 x 混淆 。info 的 值 为 14 (7 乘 以 2)。 之 前 
的 值 9 会 被 忽略 。 你 还 可 以 使 用 斜 杠 / 来 进行 除法 运算 。 

@ 这 在 代数 中 是 不 合法 的 ， 但 是 在 ECMAScript 中 合法 。 从 右边 算 起 : 首先 获取 info 的 
当前 值 4， 然 后 加 1， 右 边 的 运算 结果 为 1 5。 然后 将 这 个 值 赋 给 左边 的 变量 ， 刚 好 就 
是 info。 这 条 语句 结束 之 后 ，info 的 值 为 15。 

@ 将 字符 串 "door" 赋值 给 info。 在 ECMAScript 中 ， 变 量 的 值 可 以 是 任何 类 型 的 ， 并 可 
以 随时 变更 。 

@ 获取 info 的 当前 值 "door"， 然 后 “加 上 ” (在 后 面 连接 ) 字符 串 常 量 "bell"。 结 果 是 
单词 "doorbell"， 然 后 通过 等 号 赋值 给 左边 的 info 变量 。 对 字符 串 来 说 ， 加 号 是 唯一 
可 用 的 运算 符号 ， 你 不 能 对 它们 进行 减法 、 乘 法 和 除法 运算 。 当 字符 串 连 接 运 算 和 数字 
四 则 运算 混合 在 一 起 的 时 候 ， 需 要 特别 小 心 : "The answer is " + 2 + 2 的 结果 为 "The 


answer is 22"， 而 "The answer is " + (2 + 2) 的 结果 为 "The answer is 4"。 



























































你 可 以 将 变量 声明 和 设置 初始 值 放 在 一 起 ， 这 叫 作 初始 化 变量 。 你 也 可 以 在 赋值 运 
算 的 右 侧 包含 多 个 运算 。 下 面 的 代码 声明 了 一 个 celsius 空 变量 ， 然 后 声明 了 一 个 
fahrenheit 变量 ， 它 的 值 为 212， 然 后 对 fahrenheit 进行 运算 ， 赋 值 给 celsius (华氏 
温度 转 摄氏 温度 ) : 

var celsius; 


var fahrenheit = 212; 
celsius = ((fahrenheit - 32) / 9) * 5; 


C.4 数组 


数组 是 指 一 系列 有 序数 据 的 集合 ， 使 用 数字 作为 索引 。 前 面 我 们 将 变量 比 为 邮箱 (发送 邮 
件 给 “ 张 三 ”)， 那 么 数组 就 是 一 系列 标 有 数字 的 邮箱 集合 〈 发 送 邮件 给 “这 堆 邮 箱 中 的 第 
12 个 ”)。 唯 一 的 区 别 是 数组 的 索引 数字 从 0 开始 ,而 不 是 1。 ”下面 的 代码 声明 了 一 个 表示 
圆 形 半径 大 小 的 数组 (并 进行 了 初始 化 )。 第 二 条 语句 将 数组 的 最 后 一 个 元 素 值 设 为 了 9。 
你 可 以 通过 将 索引 值 放 到 方 括 号 中 的 方式 来 访问 数组 中 的 元 素 。 图 C-3 展示 了 代码 执行 完 
之 后 的 结果 : 




















var radiusSizes = [8.5, 6.4, 12.2, 7]; 
radiusSizes[3] = 9; 


注 2: 这 里 不 能 反 过 来 ， 因 为 程序 通常 会 使 用 数学 上 的 方法 来 选择 指定 的 条 目 ， 从 0 开始 会 容易 很 多 。 
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radiusSizes 


8.5 | 6.4 12.2 | 9 | 
am D gl 























图 C-3; 数组 示意 图 


C.5 注释 

注释 可 以 让 你 为 自己 的 程序 写 上 文档 ， 以 便 其 他 人 更 好 地 了 解 你 写 的 代码 的 作用 。 在 
ECMAScript 中 ， 注 释 的 方式 有 两 种 。 如 果 你 在 某 行 代码 中 放置 两 个 斜 杠 (//)， 则 从 该 位 
置 到 行 尾 的 所 有 字符 都 被 当 作 注 释 。 如 果 你 希望 注释 多 行 ， 可 以 使 用 /* 和 */ 将 它们 包 于 














var interest;  // 这 里 写 一 些 注释 
var rate; // 十 进 制 ,75% 表 示 为 0.75 


/* 根据 上 面 的 变量 算出 一 些 值 来 
比如 $10,000 分 186 个 月 每 月 是 多 少 */ 





C.6 条 件 语句 


通常 情况 下 ， 你 的 程序 是 按照 编写 时 的 顺序 执行 的 。 有 时候 会 需要 根据 某 个 条 件 执 行 不 同 
的 运算 。 此 时 可 以 使 用 if 语句 。 下 面 是 根据 工时 计算 工资 的 代码 。 我 们 假设 所 有 的 变量 
在 前 面 已 经 声明 过 : 


if (hours <= 40) 0 


{ 
pay = hours * rate; @ 
else © 
{ 
pay = 40 * rate + (hours - 40) * rate * 1.5; @ 
} 


@ 括号 中 的 表达 式 叫 作 条 件 。 它 需要 的 值 是 “是 / 否 "。 在 这 个 例子 中 ， 则 是 判断 “hours 
变量 的 值 是否 小 于 等 于 40”。 其 他 比较 运算 符 还 包括 小 于 (<)、 大 于 (>)、 大 于 等 于 
(>=)、 等 于 (==) 和 不 等 于 (!=)。 需要 注意 的 是 判断 运算 符 两 边 是 否 相 等 需要 使 用 两 
个 等 号 | 


@ 如 有 果 判 断 结果 为 “是 ”， 则 程序 会 继续 执行 大 括号 中 的 代码 。 

















注 3: 还 有 === 和 !== 运算 符 。 当 你 使 用 它们 时 ， 布 尔 值 和 含 数字 的 字符 串 不 会 自动 转换 为 数字 再 比较 。 
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@ 执行 男 一 对 大 括号 中 的 代码 。 大 括号 的 作用 是 把 语句 放 在 一 起 ， 表 示 是 一 组 语句 ， 这 和 
XML 中 使 用 开始 标记 、 闭 合 标记 来 标识 内 容 起 止 位 置 类 似 。 


C.7 循环 


有 时 你 会 想 重复 一 件 事 一 定 的 次 数 【( 比 如 “从 水 箱 中 取水 装 满 10 个 2L 的 容器 ”")。 此 时 
可 以 使 用 for 循环 来 做 。 之 所 以 叫 循环 ,是 因为 如 果 你 把 计算 机 执行 你 的 代码 的 顺序 用 箭 









































头 画 出 来 ， 会 发 现 这 些 逻 辑 会 变 成 一 个 个 圈 。 在 ECMAScript 中 ， 上 面 的 装 水 任务 是 下 面 
这 样 的 〈 假 设 水 箱 和 容器 变量 已 预先 定义 )。 用 大 括号 包 庄 的 循环 体 中 是 需要 循环 执行 的 
动作 : 
var i; // 计数 器 
for (i = 0; // 从 9 开始 计数 
i < 10; // 计数 器 最 多 到 10( 不 包含 10) 
i+t+) // 每 次 循环 后 计数 器 加 1 
人 
container[i] = 2; // 使 用 数字 i 装 水 
waterTank = waterTank - 2; // 水 箱 的 水 减少 2L 
} 


有 时 也 会 希望 在 某 些 条 件 为 真 的 时 候 循环 执行 一 些 动 作 (如 “在 水 箱 中 有 水 的 情况 下 一 直 
不 停 地 为 2L 容器 装 水 ”)。 这 种 情况 可 以 使 用 while 循环 : 














i = 0; // 从 第 一 个 水 箱 开 始 

while ( waterTank > 0) // 水 箱 中 还 有 水 

{ 
container[i] = 2; // 使 用 数字 i 装 水 
waterTank = waterTank - 2; // 水 箱 的 水 减少 2L 
i=i+l1; // 下 个 水 箱 

} 


C.8 函数 

你 可 以 通过 函数 来 完成 一 些 非常 复杂 的 任务 。 国 数 就 是 一 系列 ECMAScript 语句 的 集合 ， 
你 可 以 把 它 想象 成 一 张 标 注 了 食材 和 做 法 的 食谱 ， 只 要 按照 食谱 来 做 ， 就 能 得 到 指定 的 菜 
品 。 函 数 以 关键 字 function 开头 ， 然 后 接 函 数 名 称 。 为 函数 命名 时 一 般 要 求 能 表达 出 函数 
所 执行 任务 的 含义 ， 它 的 具体 规则 和 变量 一 样 。 函 数 名 后 面 接 一 对 括号 ， 里 面 放 函数 的 参 
数 。 参 数 是 指 函 数 在 完成 任务 时 需要 的 信息 。 就 像 下 面 虚构 的 食谱 : 




















韩国 泡菜 
每 份 准备 100g 泡菜 ，20g 辣椒 ，50g 和 蘑菇， 混在 一 起 ， 就 好 了 。 





注 4: 英文 为 lbop， 有 “ 圈 ” 和 “ 环 ” 的 意思 。 一 一 译 者 注 
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做 菜 之 前 ， 你 需要 先 提 供 一 些 信 息 ， 比 如 要 做 多 少 份 。 我 们 的 脚本 类 似 这 样 : 





function makeKimchiSurprise(numberOfServings) 


{ 
var kimchi = 100 * numberOfServings; 
var kojujang = 25 * numberOfServings; 
var mushrooms = 50 * numberOfServings; 
var surprise = kimchi + kojujang + mushrooms ; 


} 


这 只 是 函数 的 定义 部 分 。 如 果 不 调用 它 的 话 ， 它 不 会 做 任何 事情 。( 就 像 你 家 里 可 能 有 上 
百 份 菜谱 ， 只 有 有 人 去 拿 出 菜谱 来 按照 上 面 的 说 明 做 的 时 候 才 会 产 出 食品 。) 我 们 会 经 党 
在 事件 发 生 时 调用 某 个 函数 。 在 下 面 的 例子 中 ， 点 击 蓝 色 和 矩形 会 调用 函数 。 括 号 中 的 5 就 
是 给 函数 提供 的 信息 ， 对 应 函数 的 numberofServings 参数 : 
































<rect x="10" y="10" width="100" height="30" style="fill: blue;" 
onclick="makeKimchiSurprise( 5 )" /> 


即使 函数 不 需要 参数 ， 也 需要 有 在 函数 名 后 面 跟 上 一 对 括号 以 调用 它 。 


国 数 也 可 以 调用 其 他 函数 。 比 如 一 个 计算 复 利 的 函数 可 能 会 调用 另 一 个 国 数 来 确定 是 否 是 
闽 年 。 计 算 复 利 的 函数 在 调用 是 否 间 年 的 函数 时 带 上 一 个 参数 表示 年 份 ， 是 否 国 年 的 函数 
中 的 return 语句 会 将 结果 返回 给 调用 者 。 这 样 就 使 得 你 的 程序 更 加 模块 化 ， 并 使 一 些 通 用 
代码 可 以 被 复 用 。 如 果 用 比喻 来 说 ， 就 是 makeHollandaiseSsauce() (做 辣椒 油 ) 函数 既 可 
以 被 makeEggsBenedict() (做 鸡蛋 火腿 ) 调用 ， 也 可 以 被 makeChickenFLorentine() (做 鸡 
肉 意 粉 ) 调用 。 


C.9 对 象 、 属 性 和 方法 


取 一 个 带 开关 的 电源 、 一 个 定时 器 、 一 个 带 弹 簧 的 控制 杆 、 一 个 抑 形 金属 机 箱 以 及 一 些 线 
圈 。 把 这 些 部 分 组 合 在 一 起 ， 你 就 会 得 到 一 个 烤 面包 机 。 


























每 一 个 组 成 部 分 都 是 一 个 对 象 。 有 一 些 还 有 独特 的 属性 ， 比 如 电源 需要 的 电压 是 110 V 或 
者 220 V， 底 盘 是 有 颜色 的 且 有 一 些 卡 槽 ， 定 时 器 有 最 大 值 和 最 小 值 等 。 (控制 杆 没 啥 值得 
关注 的 特性 。) 

你 的 动作 也 是 操作 这 些 对 象 : 推拉 控制 杆 ， 将 面包 放 入 卡 槽 中 ， 开 关 电 源 ， 旋 转 定时 











我 们 将 这 人 台 烤 面 包机 搬 到 ECMAScript 中 来 看 看 。 现 在 “信箱 ”中 已 经 可 以 存 入 很 多 份 报 
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纸 了 ， 每 一 份 都 代表 对 象 不 同 的 属性 。 简 单 的 数据 类 型 (比如 数字 和 字符 串 ) 可 以 直接 写 
在 报纸 上 ， 但 是 更 复杂 的 数据 类 型 就 需要 有 它们 自己 的 “信箱 ”来 存放 所 有 的 信息 了 。 所 
以 “一 份 报纸 ”代表 的 是 到 哪里 去 找到 完整 的 对 象 (一 个 指向 数据 的 指针 )， 这 样 ， 多 个 
变量 都 可 以 指向 同一 个 对 象 。 一 个 信箱 也 可 以 保存 很 多 份 菜谱 (函数) 供 人 们 选用 。 当 一 
个 变量 在 另 一 个 “信箱 ”中 时 ， 我 们 叫 它 属性 。 当 一 个 函数 在 另 一 个 “信箱 ”中 时 ， 我 们 
叫 它 方法 。 一 个 烤 面 包机 的 组 成 如 图 C-4。 








































voltage [ pushDown!{ ) 
110 1 
[ popUp{)} 
[ turnonf) maximum 


10 
Ci| | 
setDialfn) 




















C-4: 烤 面 包机 对 象 


这 是 用 来 将 烤 面 包机 抽象 到 程序 语言 的 一 种 非常 灵活 的 方式 ， 但 是 它 也 带 来 了 一 个 问题 。 
为 了 设置 烤 面 包机 的 颜色 ， 或 者 调整 它 的 电压 ， 或 者 操作 控制 杆 ， 你 不 能 直接 这 样 : 





color = "gold"; 
voltage = 220; 
popUp(); 





color 属性 在 toaster 变量 中 ，voltage 在 toaster 中 的 powerSuppLy 中 ， 而 操作 控制 杆 则 
由 toaster 的 Lever 对 象 调用 popup 方法 来 完成 。 因 此 ， 你 必须 这 样 : 
toaster.color = "gold"; 


toaster .powerSupply.voltage = 220; 
toaster .Lever .popUp(); 


如 果 你 从 右 往 左 读 ， 加 上 “的 "， 就 很 容易 明白 :“ 将 toaster 的 color 设置 为 "gold"”， 
“将 toaster 的 powerSupply 的 voltage 设置 为 220”; “调用 toaster 的 Lever 的 popUp 方 
法 ”。 将 它 想象 成 小 时 候 听 过 的 故事 的 升级 版 就 好 了 : 这 是 一 只 在 追赶 杀 了 吃 了 在 Jack 建 
的 房子 里 的 麦芽 的 老鼠 的 猫 的 狗 。5 















































注 5: 由 于 语法 的 原因 ， 此 名 在 中 文中 显得 很 不 通顺 ， 读 者 理解 作者 所 说 的 意思 即 可 。 一 一 译 者 注 
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当 我 们 将 烤 面 包机 抽象 成 一 个 对 象 时 ， 就 建立 了 一 个 “面包 机 对 象 模 型 "“。 类 似 地 ， 有 
一 个 文档 对 象 模 型 (DOM) 可 以 让 ECMAScript 获取 文档 中 的 属性 和 调用 它 的 方法 。 
在 操作 SVG 文档 的 过 程 中 ， 几 乎 所 有 的 方法 都 以 set 或 get 开头 。 比 如 为 了 给 id 为 
wheel 的 <circle> 元 素 设 置 圆 角 半径 ， 你 可 以 写 svgDocument .getELementById("wheetL'" ) . 
setAttribute("r"，3)。 在 一 些 情况 下 ， 你 也 可 以 使 用 属性 。 比 如 ， 如 果 你 接受 到 了 一 个 
鼠标 点 击 事件 ， 希 望 获取 它 的 坐标 ， 可 以 直接 用 evt.cLientX。 



































SVG 文档 对 象 模型 其 实 是 XML 文档 对 象 模 型 的 子 集 。 一 旦 你 学 会 如 何 维 
护 SVG 文档 结构 ， 就 掌握 了 如 何 维护 其 他 的 XML 文档 。 这 样 以 后 再 学 习 
DOM 就 会 非常 快 。 




















C.10 补充 说 明 

我 们 只 是 概述 了 一 下 “什么 是 编程 ， 这 可 以 为 你 阅读 和 理解 其 他 人 所 写 的 代码 提供 基础 。 
但 如 何 定义 一 个 任务 ， 如 果 将 它 分 解 为 编程 中 的 各 个 步 又， 如何 去 解决 它 ， 则 是 另 一 个 问 
题 了 ， 这 超出 了 本 书 的 讨论 范围 。 如 果 你 喜欢 玩 字 谜 、 智 力 游 戏 ， 或 者 是 喜欢 解决 各 种 问 
题 ， 那 你 很 可 能 会 觉得 编程 很 好 玩 。 如 果 你 希望 更 深入 地 了 解 JavaScript， 我 们 推荐 你 阅 
读 《JavaScript 权威 指南 (第 6 版 )》。 
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附录 DD 





矩阵 代数 


矩阵 代数 是 数学 的 一 个 分 文 ， 它 定义 了 矩阵 的 操作 。 所 谓 算 阵 就 是 一 系列 按 行列 排列 的 数 
字 。 除 了 经 常用 于 科学 和 工程 之 中 ， 和 矩阵 代数 还 能 用 于 高 效 图 形 计 算 。 本 附录 的 目的 是 介 
绍 SVG 中 用 到 的 矩阵 代数 的 基本 概念 。 


D.1 和 矩阵 相关 术语 


通常 我 们 通过 行 和 列 的 数量 来 描述 矩阵 。 图 D-1 展示 了 一 个 矩阵， 包含 了 两 周 内 每 天 的 温 
度 ， 被 划分 成 两 行 七 列 。 这 个 矩阵 也 被 称 作 2 乘 7 算 阵 。 编 写 时 和 矩 阵 要 包 夺 在 方 括号 内 。 




















22.3 26 27.2 24.8 28 25 28.2 
30.3 30.4 28 26.4 29.9 27.2 26 








图 D-1: 每 日 气温 的 2 乘 7 矩 阵 








处 理 垂 阵 运 算 时 我 们 还 可 能 遇 到 划 


他 术语 : 方块 算 阵 表示 具有 相同 数量 的 行 和 列 的 矩阵 。 








向 量 表示 只 有 一 行 的 矩阵 ， 列 向 量 表示 只 有 一 列 的 矩阵 。 垂 阵 中 独立 的 数字 被 称 作 元 素 ， 





普通 数字 被 称 为 标量 。 下 一 次 参加 


聚会 讨论 时 我 们 就 可 以 谈论 这 些 话题 了 。 


要 将 秆 阵 的 概念 应 用 到 SVG 中 ， 我 们 可 以 使 用 一 个 2 乘 1 和 矩阵 来 表示 一 组 x 和 y 坐标。 这 


并 不 是 我 们 最 终 表 现 坐 标的 方式 ， 
是 点 (3, 5) 的 表示 形式 。 





但 它 是 一 个 很 好 的 起 点 ， 因 为 它 很 容易 理解 。 图 D-2 就 
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图 D-2: 使 用 窍 阵 表示 坐标 


D.2 和 矩阵 加 法 


最 简单 的 秆 阵 运算 就 是 加 法 。 两 个 矩阵 相 加 时 ， 将 对 应 的 元 素 相 加 即 可 。 当 然 ， 这 就 要 求 
我 们 的 矩阵 有 完全 相同 的 行 数 和 列 数 。 图 D-3 展示 了 两 个 矩阵 相 加 ， 每 个 都 是 3 乘 2 的 


矩阵。 
8 10 
-|12 14 
16 18 


我 们 可 以 看 到 ，SVG 中 的 translate 变换 可 以 通过 和 矩阵 加 法 轻松 完成 。 比 如 ， 图 D-4 中 的 
和 矩阵 加 法 可 以 对 任意 点 (x, y) 实现 transform="translate(7,2)"。 














二流 7 8 1+7 2+8 
3 4|+|9 10|=| 3+9 4+10 
6 


11 12 5+11 6+12 














图 D-3: 两 个 3 乘 2 和 矩 阵 相 加 


























图 D-4: 变换 坐标 的 简单 方法 


和 矩阵 相 加 时 的 顺序 无 关 紧 要 。 从 数学 上 来 ， 说 矩阵 加 法 是 可 交替 的 (A+B=B+A)。 同 样 可 
以 预想 到 的 是 ， 给 定 三 个 矩阵 A、B 和 C，(A+B)+C 和 A+(B+C) 是 一 样 的 。 另 一 种 运算 叫 
做 和 矩阵 减法 ， 就 是 两 个 矩阵 对 应 的 元 素 相 减 。 但 是 和 普通 的 减法 一 样 ， 和 矩阵 相 减 是 不 能 交 
禁 的 。 


D.3 ”和 矩阵 乘 


你 可 能 会 想 矩 阵 乘 法 的 工作 方式 与 加 法 类 似 ，scale() 变换 就 是 这 样 做 的 。 不 幸 的 是 ， 这 
次 简单 的 方法 不 奏效 了 。 算 阵 乘法 比 矩 阵 加 法 更 复杂 。 在 下 面 的 第 一 个 例子 中 ， 这 种 复杂 
性 似乎 是 不 必要 的 。 但 是 在 这 个 附录 的 后 面 ， 我 们 会 看 到 和 矩阵 乘法 的 用 处 远 超 它 的 难度 。 
要 让 两 个 矩阵 相 乘 ， 第 一 个 矩阵 的 列 数 必须 与 第 二 个 和 矩阵 的 行 数 相 等 。 这 样 的 矩阵 是 可 相 
乘 的 。 这 意味 着 我 们 可 以 用 一 个 3 乘 5 的 矩阵 乘 以 一 个 5 乘 4 的 矩阵 ， 但 不 能 用 3 乘 5 的 
和 矩阵 乘 以 3 乘 2 的 矩阵 。 图 D-5 中 的 两 个 矩阵 是 可 以 相 乘 的 。 
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D-5: 两 个 矩阵 相 乘 


结果 矩阵 的 行 数 会 和 第 一 个 一 样 ， 列 数 会 和 第 二 个 一 样 。 因 此 ，2 乘 3 的 矩阵 与 3 乘 2 的 
怎 阵 相 乘 ， 其 结果 会 是 一 个 2 乘 2 的 和 矩阵 。 


结果 和 矩阵 行 首 和 列 首 的 条 目 就 是 第 一 个 矩阵 第 一 行 和 第 二 个 矩阵 第 一 列 的 点 积 。 点 积 是 一 
种 “把 行 和 列 中 对 应 条 目的 乘积 加 起 来 ”的 奇特 方式 ， 如 图 D-6 所 示 。 


0 
123 1.7+ 2.8 + 3.9 50 
el IL 凡 
k :| : | | | | | 
图 D-6: 矩阵 乘法 中 的 第 一 个 条 目 


要 得 到 结果 和 矩阵 第 二 行 第 一 列 (左下 角 ) 的 值 ， 只 需要 取 第 一 个 矩阵 第 二 行 和 第 二 个 矩阵 
第 一 列 点 积 之 和 即 可 ， 如 图 D-7 所 示 。 



























































7 10 
12 3 1:7 + 2:8 + 3:9 50 
8 11 | 二 
oe | 4.7 + 5.8 + 6.9 |-| > | 
9 12 
D-7: 和 矩阵 乘法 中 的 第 二 个 条 目 
生成 其 余 条 目 计算 的 结果 如 图 D-8 所 示 。 














4.7+5-8+6.9 4.10 + 5.11 + 6.12 122 167 











1.7+2.8+3.9 1.10+2.11+3.12 | 攻 a 











D-8: 完成 的 矩阵 乘法 


有 了 这 些 信 息 ， 现 在 我 们 可 以 用 和 矩阵 乘法 来 表示 将 点 (x, y) 横向 放大 3 倍 、 纵 向 放大 1.5 倍 
的 运算 结果 。 变 换算 阵 将 是 一 个 两 行 两 列 的 矩阵 ， 因 此 它 和 两 行 一 列 的 坐标 是 匹配 的 ， 如 
图 D-9 所 示 。 

3 0 x 

0 1.5 | 


D-9: 通过 和 矩阵 乘法 进行 简单 缩放 























3.x + 0:y 3x 
Ox+1.5y | 一 | 1.5y 
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和 单一 数字 乘法 不 一 样 ， 和 矩阵 乘法 是 不 可 以 交替 的 。 如 果 有 两 个 矩阵 A 和 
B， 并 且 它 们 不 是 方块 矩阵 ， 那 么 A。B 和 B。A 就 不 会 有 相同 数量 的 行 和 列 
(前 提 是 A 和 B 在 两 个 方向 上 都 可 乘 )。 即 使 A 和 了 B 都 是 3 乘 3 的 方形 矩阵 ， 
也 不 能 保证 A 乘 以 B 和 B 乘 以 A 的 结果 相同 。 实 际 上 ， 只 有 在 极 少 数 情况 
下 它们 的 结果 才 会 一 样 。 























还 有 另外 一 种 有 限 形 式 的 乘法 : 一 个 和 矩阵 乘 以 一 个 标量 (普通 数字 )， 这 会 用 和 矩阵 的 每 个 
条 目 乘 以 这 个 标量 。 正 如 图 D-10 所 示 。 在 缩放 中 我 们 并 没有 提 及 这 一 方法 ， 因 为 这 种 构 
造 的 缩放 是 均匀 的 ， 而 SVG 缩放 并 不 是 总 是 水 平方 向 和 垂直 方向 都 一 样 。 


3 2] [15 10 
?5 6|=|25 30 




















图 D-10: 和 矩阵 乘 以 标量 


本 质 上 并 没有 秆 阵 除法 。 但 是 有 一 个 被 称 作 算 阵 求 逆 的 概念 ， 类 似 于 倒数 。 如 果 我 们 让 算 
阵 A 乘 B 再 乘 以 B 的 逆 和 矩阵 ， 结 果 就 是 A。 另 一 种 描述 逆 和 矩阵 的 方式 就 是 B 的 逆 和 矩阵 乘 
以 B 时 ， 会 创建 一 个 单位 矩阵 。 单 位 抢 阵 就 是 一 个 沿 着 对 角 线 的 值 为 1、 其 他 位 置 为 0 的 
方形 从 阵 ， 乘 以 一 个 单位 秆 阵 并 不 会 改变 原始 矩阵 。 


在 SVG 中 ， 逆 矩阵 运算 通常 用 于 坐标 系统 之 间 的 转换 ， 因 为 这 里 必须 计算 相反 的 变换 。 
但 是 ， 并 非 所 有 的 算 阵 变换 都 是 可 逆 的 ， 如 果 原 始 转 换 导致 一 个 或 多 个 维度 的 什 阵 信息 丢 
失 ， 那 么 后 续 的 乘法 就 不 能 够 重新 创建 它 。 另 外 ， 乘 以 单位 矩阵 类 似 于 乘 以 数字 1， 乘 以 
不 可 逆 秆 阵 类 似 于 乘 以 数字 0。 就 像 试 图 除 以 0， 试 图 对 不 可 首 的 矩阵 求 逆 会 导致 处 理 器 
抛 出 错误 。 


D.4 如 何在 SVG 变换 中 使 用 和 矩阵 代数 


我 们 已 经 在 平移 和 缩放 中 用 过 这 种 方法 了 ， 但 是 并 不 理想 。 例 如 ， 如 果 想 先 平移 一 个 点 ， 
然后 缩放 它 ， 我 们 需要 先 做 一 个 矩阵 加 法 ， 然 后 再 做 一 个 矩阵 乘法 。SVG 使 用 一 个 巧妙 的 
技巧 来 表现 坐标 和 和 矩 阵 变换 ， 因 此 我 们 可 以 在 一 个 操作 中 处 理 缩放 和 平移 。 首 先 ， 添加 第 
三 个 值 给 坐标 和 矩阵， 这 个 值 始终 等 于 1。 这 就 意味 着 点 (3,5) 将 会 如 图 D-11 所 示 。 
























































D-11: SVG 坐标 


SVG 使 用 的 是 设置 好 额外 的 0 和 1 的 3 乘 3 和 矩阵 ， 用 于 指定 变换 。 图 D-12 展示 了 一 个 水 
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平平 移 一 个 点 tx 距离 和 垂直 平移 ty 距离 的 矩阵 。 


1 .0 让 3 1.3 + 0.5 + tx:1 3+tx 
Oltylel5 |=| 03+15+tyl |=|5+ty 
00 1 1 


0.3 + 0.5 + 1.1 1 
D-13 展示 了 水 平方 向 缩放 一 个 点 sx 倍 ， 垂 直方 向 缩放 sy 倍 的 变换 矩阵 。 


sx 0 0 3 SX:3+ 0.5 + 0.1 SX'3 
0 sy 0|j。5 |=| 0:3+sy5+0:1 |=|sy'5 
1 


0 0 1 0.3 + 0.5 + 1.1 1 
这 就 得 到 了 一 个 一 致 的 表示 法 ， 所 有 的 变换 ， 包 括 旋转 和 倾斜 ,都 可 以 用 3 乘 3 的 矩阵 呈 
现 。 此 外 ， 由 于 每 个 矩阵 都 是 3 乘 3 形式 的 ， 它 们 都 是 相互 可 乘 的 ， 所 以 我 们 可 以 把 和 矩阵 
放 在 一 起 建立 一 系列 的 变换 。 比 如 ， 要 在 平移 之 后 进行 缩放 ， 我 们 可 以 按照 这 个 顺序 来 添 


加 和 矩阵 (请 看 图 D-14)。 
sx 0 0 3 
0 sy 0|。l5 
0 0 1 1 
图 D-14: 紧 随 平移 的 缩放 


和 上 面 的 例子 一 样 ， 这 个 问题 看 起 来 好 像 也 把 问题 搞 复杂 了 。 为 了 变换 点 (3,5)， 我 们 现在 
需要 两 个 矩阵 相 乘 。 要 变换 另外 一 个 点 需要 两 次 或 更 多 的 乘法 运算 。 给 定 一 个 带 有 几 百 个 
点 的 <path> 元 素 ， 花 费 的 计算 时 间 相 当 多 。 




















D-12: SVG 平移 























D-13: SVG 缩放 





























1 0 
0 1 ty|。 


001 

















但 是 这 正 是 SVG 聪明 的 地 方 : 它 会 将 前 两 个 矩阵 相 乘 并 存储 其 结果 ， 如 图 D-15 所 示 。 








1 0 tx sx 0 0 sx 0 tx 
0O1lty|el0 sy 0|-|10 sy ty 
0 0 1 0 0 1 0 0 1 

















D-15: 乘 以 平移 和 缩放 和 矩阵 的 结果 


这 个 “预先 相 乘 ”的 矩阵 体现 了 两 个 变换 。 通 过 用 这 个 新 的 矩阵 乘 以 坐标 点 的 算 阵 ， 平 移 
和 缩放 就 可 以 在 一 个 矩阵 乘法 中 完成 (请 看 图 D-16)。 现 在 变换 一 百 个 点 就 不 需要 200 次 
乘法 ， 而 只 需要 100 次 了 。 
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0.3 + sy:5 + ty:1 
0.3 + 0.5 + 1.1 


SyY-5 + ty 
1 


001 1 








SX 0 tx 3 
0 syty|。 








sx.3 + 0.5 + tx-1 / | Sx:3 + tx / 








D-16; 预先 相 乘 平移 和 缩放 和 矩阵 的 结果 


如 果 我 们 要 在 缩放 之 后 进行 旋转 ， 再 之 后 进行 一 个 平移 ， 就 要 创建 三 个 3 乘 3 和 矩阵 : 一 个 
处 理 平移 ， 一 个 处 理 旋 转 ， 一 个 处 理 缩放 。 我 们 要 把 所 有 的 这 些 乘 在 一 起 按照 给 定 的 顺 
序 )， 结 果 和 矩阵 会 体现 所 有 这 三 个 变换 需要 的 计算 信息 。 


正如 在 D.3 市 中 提 到 的 ， 甜 阵 乘法 是 不 可 交 禁 的 。 如 果 我 们 改变 变换 矩阵 的 顺序 ， 就 会 得 
到 不 同 的 结果 。 这 也 是 6.3 节 中 所 描述 的 变换 序列 不 同 导 致 结果 图 形 有 所 差异 背后 的 数学 
原理 。 


这 就 是 矩阵 代数 的 力量 ， 让 我 们 可 以 把 想 要 的 多 个 变换 信息 合并 到 一 个 3 乘 3 的 矩阵 中 ， 
从 而 大 大 减少 了 变换 过 程 中 的 计算 量 。 图 D-17 中 的 矩阵 用 于 指定 一 个 旋转 a 度 ， 沿 x 轴 
倾斜 ax 度 以 及 沿 着 y 轴 倾 斜 ay 度 的 矩阵 。 



























































cos(a) -sin(a) 0 1 tan(ax) 0 1 0 0 
sin(a) cos(a) 0 0 L 0 tan(ay) 1 0 
0 0 1 0 0 1 0 DO 

















图 D-17: 旋转 、 横 向 倾斜 和 纵向 倾斜 变换 的 矩 阵 


我 们 可 以 使 用 matrix(a,b,c,d,e,f) 变换 来 指定 填充 变换 矩阵 中 的 6 个 数字 ， 这 个 矩阵 数 
字 的 关系 如 图 D-18 所 示 。 











a €. 
b df 


O01 











D-18: 通用 的 变换 矩 阵 


正如 第 11 章 中 所 描述 的 ，SVG 还 在 滤 镜 相关 的 计算 中 大 量 使 用 了 和 矩阵 代数 。 这 里 ， 一 个 
像素 的 红 、 绿 、 蓝 和 阿尔 法 (不 透明 度 ) 值 被 描述 为 一 个 5 行 1 列 的 矩阵 。 它 还 添加 了 第 
5 行 ， 因此 一 个 5 乘 5 的 变换 矩阵 可 以 在 运算 时 为 这 些 值 加 上 固定 常量 以 及 乘 以 任何 因子 。 
预先 乘 以 坐标 变换 什 阵 的 方法 也 同样 适用 于 像素 变换 矩阵 。 


11.3.1 节 中 介绍 的 <feCcolorMatrix> 滤 镜 允许 我 们 指定 所 有 的 20 个 值 。 这 样 ， 标 记 























<feColorMatrix type="matrix" 
values= 
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:eg 
ds de ar as dy 
di0 d11 d12 d13 di4 
als al6 aiy als al9 /> 


会 被 放 入 如 图 D-19 所 示 的 像素 变换 矩阵 中 。 





5 ai 而 
a 3 ar 3 Yb 
alo a alz al al4 
al5 al6 al7 alg al9 
0 0 0 0 1 











D-19: 颜色 变换 矩阵 
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附录 E 


创建 字体 





使 用 系统 内 置 的 字体 泻 染 SVG 文档 能 够 满足 绝 大 多 数 需求 。 但 是 ， 有 时 候 我 们 想 要 使 用 
自 定义 字体 。 从 头 开始 以 SVG 的 方式 创建 一 个 字体 是 可 行 的 。 简 而 言 之， 我 们 可 以 用 
<font> 元 素描 述 来 源 和 字体 符号 的 默认 宽度 。<font> 内 是 <font-face> 元 素 ， 它 有 大 量 的 
属性 可 以 极度 详细 地 描述 字体 的 尺寸 。 表 E-1 总 结 了 一 些 比较 有 用 的 属性 。 可 以 在 SVG 
规范 (http://www.w3.org/TR/SVG/fonts.html) 中 详细 查看 所 有 信息 。 








表 E-1: font-face 属 性 



































font-family 字体 名 称 列表 

font-style normal、italic 和 oblique 值 之 一 

font-variant normal 或 者 small-caps 

font-weight normal、bold,， 或 者 是 以 100 为 梯度 的 从 100 到 900 的 数字 

font-stretch 说 明 相对 于 这 个 字体 系列 中 其 他 字体 的 外 观 的 性 质 condensed 或 者 expanded。 可 
用 于 condensed 或 expanded 的 前 级 有 ultra-、extra- 和 semi- 

font-size all， 适 用 于 大 多 数 可 缩放 字体 ， 或 者 是 如 果 字 体 是 按照 限定 的 尺寸 、 列 表 长 度 
(比如 18pt) 设计 的 

unicode-range 这 个 字体 所 涵盖 的 Unicode 字符 范围 ， 格 式 为 Ustart-end 

units-per-em em 块 的 坐标 单位 。 这 会 给 字体 建立 一 个 坐标 系统 。 以 下 属性 都 按照 这 个 单位 测 
量 

cap-height 大 写字 母 高 度 

x-height x 高 度 

accent-height 原点 到 强调 字符 顶部 的 距离 

ascent 上 坡度 

descent 下 坡度 
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font-family 字体 名 称 列表 
widths 符号 对 应 每 个 字符 的 宽度 列表 
bbox 字体 最 大 边界 框 ， 一 个 盒子 中 可 以 填充 的 最 大 字符 





underline-position 下 划 线 的 理想 位 置 
underline-thickness ”下划线 的 理想 厚度 








SVG 字体 规范 旨 在 允许 设计 师 创建 易于 访问 的 商标 和 图 形 。 搜 索引 擎 和 屏幕 阅读 器 会 把 
文本 理解 为 字符 序列 ， 但 是 文本 的 设计 完全 可 以 自 定 义 ， 并 且 在 每 个 系统 上 看 起 来 都 一 
样 。 编 写本 书 时 ， 这 一 理想 还 没有 实现 ， 因 为 两 个 主流 浏览 器 (IE 和 FireFox) 还 没有 实 
现 SVG 字体 。 如 果 我 们 创建 了 一 个 自 定义 SVG 字体 ， 有 一 些 Web 服务 可 以 把 它 转换 为 其 
他 字体 格式 以 便 用 于 浏览 器 中 。 

紧 随 <font-face> 的 是 <glyph> 元 素 ， 用 于 包含 我 们 想 要 用 于 字体 的 每 个 符号 的 路 径 信 息 。 









































虽然 从 头 开 始 创建 字体 是 可 以 的 ， 但 是 工作 量 很 大 ， 并 且 通 常 这 是 一 个 重复 的 工作 ， 因 为 
我 们 需要 的 符号 可 能 是 一 个 已 有 的 字体 。 如 果 对 于 所 需 的 符号 已 经 有 一 个 TrueType 字体 
了 ， 你 是 幸运 的 。 在 TrueType 中 使 用 二 次 贝 塞 尔 曲线 很 容易 把 字体 转换 为 SVG 符号。 只 
需要 确保 在 不 支持 SVG 字体 的 浏览 器 中 引入 标准 的 TrueType 字体 作为 备 选 项 〈 作 为 一 个 
Web 字体 或 者 引用 一 个 本 地 字体 的 名 称 ) 即 可 。 

















ttf2svg 工 具 


Apache Batik 项 目 创建 了 一 个 工具 ， 可 以 把 TrueType 字体 转换 为 SVYG。 下 面 的 总 结 改编 
自 Batik 项 目的 文档 (2013 Apache 软件 基金 会 。 保 留 所 有 版 权 )。 

















如 果 使 用 Batik 二 进 制 发 布 包 ， 在 命令 行 输入 以 下 命令 : 


java -jar batik-ttf2svg.jar [options] 

















如 果 使 用 Batik 开发 者 发 布 包 ， 在 命令 行 输入 以 下 命令 : 


build ttf2svg [options] 








这 两 种 情况 下 ， 选 项 都 是 一 样 的 〈 当 在 命令 行 中 输入 时 ， 这 些 选 项 将 会 在 同一 行 ， 为 了 便 
于 阅读 ， 这 里 我 们 把 它们 放 在 单独 的 行 中 ) : 








ttf-path 

[-L range-begin] 
[-h range-end] 
[-asciil] 

[id id] 

[-o output-path] 
[-testcard] 
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选项 的 含义 如 下 。 
e。 ttf-path 
指定 包含 要 转换 的 字符 的 TrueType 字体 文件 。 





。 -L range-begin 
。 -h range-end 


要 转换 为 SVG 的 字符 范围 的 起 始 值 和 结束 值 (ASCII 或 者 Unicode 值 ) 。 
。 -ascii 

强制 使 用 ASCII 字符 映射 。 
。 -id id 

指定 生成 的 <font> 元 素 的 id 属性 值 。 


。 -0 output-path 
指定 生成 SVG 字体 文件 的 路 径 。 如 果 不 指定 ， 则 输出 到 Java 控制 台 。 








。 -testcard 
用 于 指定 在 字体 文件 中 应 该 插入 一 系列 <text>， 用 于 将 字符 可 视 化 和 测试 SVG 字体 中 
的 字符 。 这 提供 了 一 种 简单 的 方式 来 从 视觉 上 验证 生成 的 SVG 字体 文件 。 
比如 ， 要 转换 字符 48 到 57， 也 就 是 字符 0 到 9， 从 myFont.ttf 到 SVG 等 价 的 mySVGFont. 
svg 文件 ， 插 入 一 个 测试 卡 以 便 轻松 将 字体 可 视 化 ， 我 们 可 以 使 用 这 条 命令 : 


java -jar batik-ttf2svg.jar /usr/home/myFont.ttf -L 48 -h 57 
-id MySVGFont -o mySVGFont.svg -testcard 


在 SVG 文件 中 艇 入 字体 之 前 需要 确保 你 确实 有 权限 进行 戏 入 操作 。TrueType 
字体 文件 包含 一 个 定义 字体 “嵌入 性 ”的 标记 ， 也 有 些 工具 可 以 用 来 检查 这 
个 标记 。 
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附录 FF 


将 圆 弧 转换 为 不 同 的 格式 





F.1 根据 中 心 和 角度 转换 为 SVG 


下 面 的 JavaScript 代码 用 于 将 中 心 和 角度 格式 的 圆 弧 转换 为 适当 的 形式 ， 放 到 SVG 
<path> 中 : 

















将 一 个 围绕 中 心 的 椭圆 弧 转 换 为 适用 于 SV6 的 参数 化 的 椭圆 弧 












































x 轴 旋 转角 度 


返回 一 个 数组 ,包含 : 
弧 起 点 的 x 坐标 
弧 起 点 的 y 坐 标 
椭圆 x 半径 
椭圆 y 半 径 
x 轴 旋 转角 度 
SVG 规 范 中 定义 的 大 弧 形 标志 
SVG 规 范 中 定义 的 范围 标志 
弧 末 端的 x 坐标 
弧 末 端的 y 坐 标 
机 
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function centeredToSVG(cx,cy,rx,ry,theta,delta,phi) 


{ 


var endTheta, phiRad; 
var x0, y0, x1, yl1, largeArc, sweep; 


























/* 
将 角度 转换 为 弧度 。 需 要 一 个 单独 的 变量 把 phi 变 为 弧度 ,因为 必须 保持 phi 为 度数 形式 用 
返回 值 
*/ 


theta = theta * Math.PI / 180.0; 
endTheta = (theta + delta) * Math.PI / 180.0; 
phiRad = phi * Math.PI / 180.0; 


/* 
找 出 起 点 和 终点 的 坐标 

x0 = cx + Math.cos(phiRad) * rx * Math.cos(theta) + 
Math.sin(-phiRad) * ry * Math.sin(theta); 








y0 = cy + Math.sin(phiRad) * rx * Math.cos(theta) + 
Math.cos(phiRad) * ry * Math.sin(theta); 


x1 = cx + Math.cos(phiRad) * rx * Math.cos(endTheta) + 
Math.sin(-phiRad) * ry * Math.sin(endTheta); 


y2 = cy + Math.sin(phiRad) * rx * Math.cos(endTheta) + 
Math.cos(phiRad) * ry * Math.sin(endTheta); 


LargeArc = (delta > 180) ? 1 : 0; 
sweep = (delta > 0) ?1:0; 


return [x0, y0, rx, ry, phi, largeArc, sweep, x1, y1]; 


} 


F.2 根据 SVG 转 换 为 中 心 和 角度 


下 面 的 代码 改编 自 Apache Batik 项 目 ， 用 于 将 SVG 风格 的 弧度 转换 为 中 心 和 角度 格式 : 





/* 
转换 SVG 路 径 参 数 形式 的 椭圆 为 围绕 中 心 点 的 圆 弧 


参数 : 
圆 弧 起 点 x 坐 标 

圆 弧 起 点 y 坐 标 

椭圆 x 半径 

椭圆 y 半 径 

x 轴 旋转 角度 

SVG 规范 中 定义 的 最 大 圆 弧 标志 
SVG 规范 中 定义 的 范围 标志 

圆 缴 终点 x 坐标 
圆 缴 终 点 y 坐 标 






























































返回 一 个 数组 ,包含 : 
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f 


{ 


中 点 x 坐标 
中 点 y 坐 标 
椭圆 x 半径 
椭圆 y 半 径 
司 弧 起 始 角 度 
司 弧 所 跨度 数 
x 轴 旋 转角 度 
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unction convertArc(x0, yO0, rx, ry, xAngle, largeArcFlag, 
sweepFlag, x, y) 


// 第 1 步 :计算 当前 点 和 终点 之 间距 离 的 一 半 
var dx2 = (x0 - x) / 2.0; 
var dy2 = (y0 - y) / 2.0; 


// 转换 角度 度数 为 弧度 

var xAngle = Math.PI * (xAngle % 360.0) / 180.0; 
var cosXAngle = Math.cos(xAngle); 

var sinXAngle = Math.sin(xAngle); 





// 计算 x1，y1 
var x1 = (cosXAngle * dx2 + sinXAngle * dy2); 
var y1 = (-sinXAngle * dx2 + cosXAngle * dy2); 


// 保证 半径 足够 大 

rx = Math.abs(rx); 
ry = Math.abs(ry); 
VaF TXSq = TX * fx; 
Var ry9q = ry * ry; 
Var x1Sq = X1 * X1; 
var y13q = yl * y1; 


var radiiCheck = x1Sq / rxSq + y1Sq / rySq 
if (radiiCheck > 1) { 

rx = Math.sqrt(radiiCheck) * rx; 

ry = Math.sqrt(radiiCheck) * ry; 

rxSq = rx * rx; 

ry9q = ry * ry; 
} 


// 第 ?2 步 :计算 (cx1，cy1) 

var sign = (largeArcFlag == sweepFlag) ? -1 : 1; 

Var sq = ((rxSq * rySq) - (rxSq * y1Sq) - (rysq * x1Sq)) / 
((rxSq * y1Sq) + (rySq * x1Sq)); 

sq = (sq < 0) ?0 +: sg; 

var coef = (sign * Math.sqrt(sq)); 

var cx1 = coef * ((rx * y1) / ry); 

var Cy1 = coef * -((ry * x1) / rx); 


// 第 3 步 :根据 (cx1，cy1) 计 算 (cx，cy) 

var sx2 = (x0 + x) / 2.0; 

var sy2 = (yO + y) / 2.0; 

Var CX = sx2 + (cosXAngle * cx1 - sinXAngle * cy1); 
var Cy = sy2 + (sinXAngle * cx1 + cosXAngle * cy1); 
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// 第 4 步 : 计 算 angLeStart 和 angLeExtent 
var Ux = (x1 - cx1) / rx; 

var uy = (y1 - cy1) / ry; 

var vx = (-x1 - cx1) / rx; 

var vy = (-y1 - cy1) / ry; 

Vaf ps. nm? 

// 计算 起 始 角 度 
n = Math.sqrt((ux * ux) + (yy * uy)); 

p= Ux; // (1 * ux) + (0 * uy) 

sign = (yy < 0) ? -1.0 : 1.0; 

var angleStart = 180.0 * (sign * Math.acos(p / n)) / Math.PI; 





Xe 





// 计算 角度 范围 
n = Math.sqrt((ux * Ux + Uy * Uy) * (Vx * vx + Vy * Vy)); 
P=UuxX* vx+ Uy * Vy; 

sign = (ux * vy -Uy* vx<0)? -1.0 : 1.0; 

var angleExtent = 180.0 * (sign * Math.acos(p / n)) / Math.PI; 
if(!sweepFlag && angleExtent > 0) 


{ 
angleExtent -= 360.0; 
} 
else if (sweepFlag && angLeExtent < 0) 
‘ 
angleExtent += 360.0; 
} 


angleExtent %= 360; 
angleStart %= 360; 


return( [cx, cy, rx, ry, angleStart, angleExtent, xAngle] ); 
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赋 。 他 开发 了 HTML 和 CSS、JavaScript、XML 及 Perl 课程 。 他 在 圣何塞 的 常 青 谷 学 院 
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Amelia Bellamy-Royds 是 一 名 专门 从 事 科学 和 技术 交流 的 自由 撰 稿 人 。 她 通过 参与 Web 
Platform Docs 、Stack Exchange 和 Codepen 等 在 线 社 区 ， 帮 助 推动 Web 标准 和 设计 。 她 对 
SVG 的 兴趣 源 于 数据 可 视 化 的 工作 ， 并 建立 在 她 学 会 编程 的 基础 之 上 。 她 拥有 生物 信息 学 
理学 学 士 学 位 。 在 加 拿 大 国会 图 书馆 做 政策 研究 工作 时 ， 她 发 现 自己 更 喜欢 讨论 科学 研究 
的 应 用 ， 而 不 是 做 实验 室 工作 ,于 是 她 开始 学 习 新 闻 学 研究 生 课程 。 她 目前 生活 在 加 拿 大 
阿尔 伯 塔 省 埃 德 蒙 顿 市 。 如 果 不 在 电脑 前 ， 她 很 可 能 在 料理 菜园 或 者 外 出 享受 现场 音乐 。 


封面 介绍 


本 书 封面 上 的 动物 是 一 只 大 眼 斑 稚 。 这 种 稚 鸡 分 布 在 马来西亚 、 泰 国 、 苏 门 答 腊 岛 和 婆罗 
洲 岛 ， 生 活 在 热带 雨林 中 。 雄 性 的 面部 呈 蓝 色 ， 有 黑 冠 和 短 头 冠 ， 腹 部 呈 斑 驳 的 棕色 。 起 
膀 和 尾羽 上 的 彩虹 色 斑 点 有 助 于 吸引 雌性 。 只 性 比 雄 性 体型 小 ， 也 没有 那 种 华丽 的 羽毛 。 





大 眼 斑 维 的 翅膀 可 以 持续 生长 到 6 岁 。 它 的 尾羽 在 所 有 乌 类 中 是 最 长 的 ， 达 5.7 英尺 。 有 
些 文化 在 他 们 的 头饰 中 使 用 这 种 羽毛 。 





O’Reilly 封面 上 的 许多 动物 都 濒临 灭绝 ， 它 们 都 对 这 个 世界 非常 重要 。 要 了 解 更 多 关于 如 
何 提供 帮助 的 信息 ， 请 参考 animals.oreilly.com。 


封面 图 片 是 一 个 出 自 Dover Pictorial Archive 的 19 世纪 的 雕刻 品 。 
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欢迎 加 入 


图 灵 社 区 ITuring.cn 


一 一 最 前 沿 的 上 T 类 电子 书 发 售 平台 


电子 出 版 的 时 代 已 经 来 临 。 在 许多 出 版 界 同行 还 在 犹豫 衍 香 的 时 候 ， 图 灵 社 区 已 经 采取 实 
际 行动 拥抱 这 个 出 版 业 巨 变 。 作 为 国内 第 一 家 发 售 电子 图 书 的 开 类 出 版 商 ， 图 灵 社 区 目前 为 读者 
提供 两 种 DRM-free 的 阅读 体验 :在线 阅读 和 PDF。 

相 比 纸 质 书 ， 电 子 书 具 有 许多 明显 的 优势 。 它 不 仅 发 布 快 ， 更 新 容易 ， 而 且 尽 可 能 采用 了 彩 
色 图 片 ( 即使 有 的 书 纸 质 版 是 黑白 印刷 的 )。 读 者 还 可 以 方便 地 进行 搜索 、 剪 贴 、 复 制 和 打印 。 
图 灵 社 区 进一步 把 传统 出 版 流程 与 电子 书 出 版 业务 紧密 结合 ， 目 前 已 实现 作 译 者 网 上 交 
稿 、 编 辑 网 上 审 稿 、 按 章 发 布 的 电子 出 版 模式 。 这 种 新 的 出 版 模式 ， 我 们 称 之 为 “人 敏捷 出 
版 ”， 它 可 以 让 读者 以 较 快 的 速度 了 解 到 国外 最 新 技术 图 书 的 内 容 ， 弥 补 以 往 翻 译 版 技术 书 
“出 版 即 过 时 ”的 缺憾 。 同 时 ， 敏 捷 出 版 使 得 作 、 译 、 编 、 读 的 交流 更 为 方便 ， 可 以 提前 消灭 
书稿 中 的 错误 ， 最 大 程度 地 保证 图 书 出 版 的 质量 。 




























































































优惠 提示 : 现在 购买 电子 书 ， 读 者 将 获 赠 书 款 20% 的 社区 银子 ， 可 用 于 哆 换 纸 质 样 书 。 





最 方便 的 开放 出 版 平台 


图 灵 社 区 向 读者 开放 在 线 写 作 功 能 ， 协 助 你 实现 自 出 版 和 开源 出 版 的 梦想 。 利 用 “合集 ” 
功能 ， 你 就 能 联合 二 三 好 友 共 同 创作 一 部 技术 参考 书 ， 以 免费 或 收费 的 形式 提供 给 读者 。( 收 
费 形 式 须 经 过 图 灵 社 区 立项 评审 。 ) 这 极 大 地 降低 了 出 版 的 门 柳 。 只 要 你 有 写作 的 意愿 ， 图 灵 
社区 就 能 帮助 你 实现 这 个 梦想 。 成 熟 的 书稿 ， 有 机 会 入 选 出 版 计划 ， 同 时 出 版 纸 质 书 。 

图 灵 社 区 引进 出 版 的 外 文 图 书 ， 都 将 在 立项 后 马上 在 社区 公布 。 如 果 你 有 意 翻 译 哪 本 图 
书 ， 欢 迎 你 来 社区 申请 。 只 要 你 通过 试 译 的 考验 ， 即 可 签约 成 为 图 灵 的 译 者 。 当 然 ， 要 想 成 功 
地 完成 一 本 书 的 翻译 工作 ， 是 需要 有 坚强 的 妆 力 的 。 












































最 直接 的 读者 交流 平台 


在 图 灵 社 区 ,你 可 以 十 分 方便 地 写作 文章 、 提 交 勘 误 、 发 表 评 论 ， 以 各 种 方式 与 作 译 者 、 
编辑 人 员 和 其 他 读者 进行 交流 互动 。 提 交 勘 误 还 能 够 获 赠 社区 银子 。 
你 可 以 积极 参与 社区 经 常 开 展 的 访谈 、 乐 译 、 评 选 等 多 种 活动 ， 启 取 积 分 和 银子 ， 积 累 个 人 
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关注 图 灵 教 育 关注 图 灵 社区 
iTuring.cn 


在 线 出 版 _ 电子 书 《 码 农 》 杂 志 图 灵 访 谈 …… 
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SVG 精髓 (第 2 版 ) 


本 书 详尽 介绍 了 可 缩放 矢量 图 形 (SVG) 技术 。SVG 是 一 种 标记 语言 ， 
为 大 多 数 矢量 绘图 程序 和 交互 式 Web 图 形 工具 所 使 用 。 本 书 将 带 你 详细 
了 解 SVG 的 功能 ， 首 先 学 习 简 单 的 SVG 应 用 ， 如 绘制 线条 ， 然 后 逐步 探 
索 复 杂 的 特性 ， 比 如 滤 镜 、 变 换 、 渐 变 和 图 案 等 。 


本 书 第 2 版 扩展 了 动画 、 交 互 式 图 形 以 及 SVG 编程 等 内 容 。 交 互 式 的 在 线 
示例 让 你 很 容易 在 Web 浏 览 器 中 实验 SVG 的 特性 。 本 书 还 为 经 验 丰 富 的 
设计 师 准备 了 6 个 附录 ， 解 释 了 XML 标记 和 CSS 样 式 等 基本 概念 ， 因 此 即 
使 你 没有 网 页 设计 的 经 验 ， 也 可 以 开始 学 习 SVG。 


通过 阅读 本 书 ， 你 将 能 够 : 

轩 为 网 页 创建 高 质量 、 高 分 辩 率 的 图 形 ; 

看 创建 通过 搜索 引擎 或 辅助 技术 易于 访问 的 图 表 和 装饰 性 标题 ，; 
目 用 SVG 蒙 版 、 滤 镜 以 及 变换 给 图 形 、 文 本 和 照片 添加 艺术 效果 ， 
下 用 SVG 标记 动画 绘制 图 形 ， 使 用 CSs 和 Javascript 添 加 交互 ， 

男 根据 现 有 的 矢量 数据 或 XML 数据 使 用 编程 语言 或 XSLT 创 建 SVG。 





J. David Eisenberg 是 一 名 程序 员 和 教师 。 他 开发 了 CSS、JavaScript、 
CGI、XML 和 Perl 等 多 门 编程 课程 ， 并 在 加 州 圣 何 塞 常 青 谷 学 院 教授 计算 机 信 
息 技术 课程 。 他 还 著 有 Etuaes for Erlang、Let's Read Hiragana 以 及 本 书 第 1 版 。 


Amelia Bellamy-Royds 是 一 位 专门 从 事 科 学 和 技术 交流 的 自由 撰 稿 人 。 她 
通过 参与 Web Platform Docs、Stack Exchange 和 Codepen 等 在 线 社区 ， 帮 助 
推动 Web 标 准 和 设计 。 


XML/WEB DESIGN 


封面 设计 : Karen Montgomery 张 健 


图 灵 社 区 : iTuring.cn 
热线 : (010)51095186 转 600 


计算 机 /网 页 制作 | 
人 民 邮 电 出 版 社 网 址 : www.ptpress.com.cn 
O'Reilly Media, Inc. 授 权 人 民 邮 电 出 版 社 出 版 


此 简体 中 文 版 仅 限于 中 国 大 陆 (不 包含 中 国 香港 、 澳 门 特别 行政 区 和 中 国 合 湾 地 区 ) 销售 发 行 


This Authorized Edition for sale only in the territory of Peoples Republic of China (excluding 








Hong Kong, Macao and Taiwan) 


“ 早 在 2002 年 ， 我 就 通过 本 书 的 


第 1 版 初次 了 解 了 SVG， 它 对 
我 帮助 很 大 。 真 的 很 高 兴 ， 如 
今 本 书 针对 现代 浏览 器 以 及 新 
时 代 的 开发 者 和 设计 者 进行 了 
更 新 升级 。” 





Doug Schepers 
万 维 网 联盟 SVG 工作 组 成 员 


ISBN 978-7-115-40254-7 
9 | | 5 | 2 | 
ISBN 978-7-115-40254-7 
定价 : 69.00 元 





看 完了 


如 果 您 对 本 书 内 容 有 疑问 ， 可 发 邮件 至 contact@turingbook.com， 会 有 编辑 
或 作 译 者 协助 答疑 。 也 可 访问 图 灵 社 区 ， 参 与 本 书 讨论 。 


如 果 是 有 关 电 子 书 的 建议 或 问题 ， 请 联系 专用 客服 邮箱 : 


ebook@turingbook.com。 
在 这 可 以 找到 我 们 : 


微 博 @ 图 灵 教 育 : 好 书 、 活 动 每 日 播报 

微 博 @ 图 灵 社 区 : 电子 书 和 好 文章 的 消息 

微 博 @ 图 灵 新 知 : 图 灵 教 育 的 科普 小 组 

微 信 图 灵 访 谈 : ituring_interview， 讲 述 码 农 精彩 人 生 
微 信 图 灵 教 育 : turingbooks 


